javascript - 在 react 中映射数据时隔离函数

Question

我有数据被映射为转发器。但我需要隔离开场功能(这是一个 Accordion )。我仍在通过 React 学习我的方式。基本上， Accordion 加载状态为 open: false 单击 ListItem 后，HandleClick 函数会将状态切换为 open: true。一个简单的概念，我只需要将它隔离，让它独立工作。而现在它们都同时打开和关闭。

这是构造函数和函数中的状态

constructor(props) {
    super(props);
    this.state = {
        open: true,
    };
}

handleClick = () => { this.setState({ open: !this.state.open }); };

这是我在 ReactJS 中的映射脚本

{LicenseItems.map((item, index) => (
    <div key={index}>
        <ListItem 
            divider 
            button
            onClick={this.handleClick}>
            <ListItemText primary={<CMLabel>{item.accordion_name}</CMLabel>}/>
        </ListItem> 
        <Collapse
            in={!this.state.open} 
            timeout="auto" 
            unmountOnExit>
            {item.content}
        </Collapse> 
    </div>
))}

in 根据 MaterialUI-Next 指示它是否打开

提前谢谢大家!

Answer 1

不是很漂亮，但像这样的东西应该可以工作:

constructor(props) {
    super(props);
    this.state = {
        open: {},
    };
}
handleClick = (idx) => {
  this.setState(state => ({open: { [idx]: !state.open[idx]} }))
}

// in render
{LicenseItems.map((item, index) => (
    <div key={index}>
        <ListItem 
            divider 
            button
            onClick={() => this.handleClick(index)}>
            <ListItemText primary={<CMLabel>{item.accordion_name}</CMLabel>}/>
        </ListItem> 
        <Collapse
            in={!this.state.open[index]} 
            timeout="auto" 
            unmountOnExit>
            {item.content}
        </Collapse> 
    </div>
))}

最好为此创建单独的组件，它们有自己的 open 状态。