#reactjs
#reactjs
Вопрос:
В ReacJS есть пример для одиночного сворачивания:
function Example() {
const [open, setOpen] = useState(false);
return (
<>
<Button
onClick={() => setOpen(!open)}
aria-controls="example-collapse-text"
aria-expanded={open}
>
click
</Button>
<Collapse in={open}>
<div id="example-collapse-text">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
labore wes anderson cred nesciunt sapiente ea proident.
</div>
</Collapse>
</>
);
}
render(<Example />);
Но, скажем, я перебирал массив объектов, где каждый объект представляет собой карту, и я хочу, чтобы нажатие кнопки на отдельной карте открывало только эту карту, а не все карты.
В настоящее время у меня есть это:
return (
<div>
<div className='card-detail'>All Cards ({this.props.cardDetails.details.length})</div>
{this.props.cardDetails.details.map((detail, index) => {
return (
<CardStyle key={index}>
<Container>
<CardRow>
<FlexCol>
<Button onClick={() => this.setState({ open: !this.state.open })}
aria-controls="example-collapse-text"
aria-expanded={this.state.open}
variant="light">Expand</Button>
</FlexCol>
</CardRow>
</Container>
<CardDetailInfo save={this.saveCard} confirm={this.confirmCard} open={this.state.open} detail={detail}></CardDetailInfo>
</CardStyle>)
})}
</div>
)
The collapse code is an other class;
class CardDetailInfo extends Component {
constructor(props) {
super(props);
}
render() {
return (
<Collapse in={this.props.open}>
</Collapse>
)
...
Комментарии:
1. Вы должны сохранять
status
состояние каждой карты в зависимости от идентификатора карты
Ответ №1:
итак, я смог заставить его работать:
...
constructor(props) {
super(props);
this.state = {
open: []
}
this.handleClick = this.handleClick.bind(this);
}
componentDidUpdate(oldProps) {
if(oldProps.open !== this.props.open) {
this.setState({
open: this.props.open
});
}
}
handleClick(event) {
const id = event.target.id;
let local_open = this.state.open;
local_open[id] = !local_open[id]
this.setState({open: local_open });
}
...
<Button id={index} onClick={this.handleClick}
variant="light">Expand</Button>
In another class I use if statements
if (this.props.open.length == 0 || this.props.open[this.props.index]==false)
default view
if(this.props.open[this.props.index]==true)
expand view
Ответ №2:
Чтобы иметь переключатель в каждом <Collapse>
или сохранить массив открытых статусов для вашего списка. Вот несколько вариантов, которые у вас есть:
1. Одиночный коллапс:
import React, { useState } from 'react';
function Collapse (props) {
const [open, setOpen] = useState(props.in);
useEffect(() => {
setOpen(props.in);
}, [props.in]);
return (
...
);
}
export default Collapse;
2. Добавьте новое поле с cardDetails
именем «открыть» и измените это свойство, когда это необходимо.