我正在使用reactstrap折叠制作可折叠部分。
接收到的数据是嵌套的,我需要在第二级显示折叠按钮,第三级将显示数据。
在此显示级别上没有问题,单击按钮已在第三级显示数据。
问题:单击任何按钮时,将打开所有可折叠部分,而不是单击的部分。
要求:仅需要显示被单击部分的标记,并且再次单击该按钮时,应将其折叠回去,并且与其他任何项目都不应该有任何关系。
如下工作片段,
const data = [{"orderId":1,"orderNo":"123", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1", "Token2","Token3"]}] },
{"orderId":2,"orderNo":"456", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1","Token3"]}] },
{"orderId":3,"orderNo":"789", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1", "Token2","Token3", "Token4"]}] }
]
const {Component, Fragment} = React;
const {Button, Collapse} = Reactstrap;
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
open: false
};
}
toggle = () =>
this.setState(s => ({
open: !s.open
}));
render() {
console.log();
return <div>
{
data.map((levelOneItem, i) => {
return(
<div>
<div> Order Id: {levelOneItem.orderId} </div>
{
levelOneItem.orderParts.map((levelTwoItem, j) => {
return(
<div>
<div> Order Part Id: {levelTwoItem.orderPartsId} </div>
<Button onClick={this.toggle}>Display Token</Button>
<Collapse isOpen={this.state.open}>
{
<div>
{levelTwoItem.regTokens.map((levelThreeItem, k) => {
return(<span> {levelThreeItem} </span>)
})
}
</div>
}
</Collapse>
</div>
)
})
}
</div>
)
})
}
</div>;
}
}
ReactDOM.render(<Menu />, document.getElementById("root"));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>
<div id="root"></div>
请帮助我获得仅在所选项目上切换提供的嵌套数据的结果。
添加标识索引作为您的处理程序函数的参数很好。
toggle = idx => () => {
this.setState(prevState => ({open: prevState.open === idx ? '' : idx}));
}
<Button onClick={this.toggle(i)}>
<Collapse isOpen={open === i}>
const data = [{"orderId":1,"orderNo":"123", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1", "Token2","Token3"]}] },
{"orderId":2,"orderNo":"456", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1","Token3"]}] },
{"orderId":3,"orderNo":"789", "orderParts":[{"orderPartsId":1,"orderPrtNo":"OP-1", "regTokens":["Token1", "Token2","Token3", "Token4"]}] }
]
const {Component, Fragment} = React;
const {Button, Collapse} = Reactstrap;
class Menu extends Component {
constructor(props) {
super(props);
this.state = {
open: ''
};
}
toggle = idx => () => {
this.setState(prevState => ({open: prevState.open === idx ? '' : idx}));
}
render() {
const { open } = this.state;
return <div>
{
data.map((levelOneItem, i) => {
return(
<div>
<div> Order Id: {levelOneItem.orderId} </div>
{
levelOneItem.orderParts.map((levelTwoItem, j) => {
return(
<div>
<div> Order Part Id: {levelTwoItem.orderPartsId} </div>
<Button onClick={this.toggle(i)}>Display Token</Button>
<Collapse isOpen={open === i}>
{
<div>
{levelTwoItem.regTokens.map((levelThreeItem, k) => {
return(<span> {levelThreeItem} </span>)
})
}
</div>
}
</Collapse>
</div>
)
})
}
</div>
)
})
}
</div>;
}
}
ReactDOM.render(<Menu />, document.getElementById("root"));
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/reactstrap/8.4.1/reactstrap.min.js"></script>
<div id="root"></div>