如何在反應中只切換一項？

Question

我正在使用 reactstrap Collapse 制作可折疊部分。

收到的數據是嵌套的，我需要在第二級顯示折疊按鈕，第三級將顯示要顯示的數據。

這個級別的顯示沒問題，點擊按鈕它已經在第三級顯示數據。

問題：單擊任何按鈕時，所有可折疊部分都會打開，而不是被點擊的部分。

要求：只需要顯示被點擊部分的令牌，再次點擊按鈕時，它應該被折疊回來，它不應該與任何其他項目有任何關系。

工作片段如下，

 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>

請幫助我實現僅對提供的​​嵌套數據的選定項目進行切換的結果。

Answer 1

添加一個識別索引作為處理程序函數的參數就可以了。

this.state = {
  open: ''
};

toggle = idx => () => {
  this.setState(prevState => ({open: prevState.open === idx ? '' : idx}));
}

<Button onClick={this.toggle(i)}>
<Collapse isOpen={open === i}>

---

更新

如果您希望它們獨立，則需要一個 Array來存儲每個狀態。

this.state = {
  open: [0, 2]                                // Initial opened item's index
};

toggle = idx => () => {
  this.setState(prevState => ({
    open: this.state.open.includes(idx)       // check whether been expanded
      ? prevState.open.filter(x => x !== idx) // if yes, remove from list
      : [...prevState.open, idx]}             // if no, add to list
    ))
}

<Button onClick={this.toggle(i)}>
<Collapse isOpen={open.includes(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: [0, 2] // Initial opened item's index }; } toggle = idx => () => { this.setState(prevState => ({open: this.state.open.includes(idx) ? prevState.open.filter(x => x !== idx) : [...prevState.open, 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.includes(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>