javascript - 反应：将状态中的所有对象键设置为false

Question

我有带有状态的 React 组件：

this.state={
            items: [
                {
                    label: '1 Some text',
                    active: true
                },
                {
                    label: '2 Some text',
                    active: false
                },
                {
                    label: '3 Some text',
                    active: false
                },
                {
                    label: '4 Some text',
                    active: false
                }
            ]
        }

我有一个菜单，当我点击它时，我想改变状态：

this.state.items.map(item => {
                return <li onClick={}>{item.label}</li>
            })

如果我单击任何菜单项，我想将其active: true设为 ，并将所有其他菜单项设置为active: false。

标签： javascriptreactjs

Answer 1

更新：

 manuOnClick=(e, label)=>{
     let newState = this.state.items.map(item=>{
             if(label === item.label)
             {   
                 let newItem={
                     label:label,
                     active:true
                 }
                 return newItem   
             }
             else
             {
                 let newItem={
                     label:item.label,
                     active:false
                 }
                 return newItem 
             }
     })

     this.setState({
          items:newState
     })
}

对不起，

onClick={(e,item.label)=>this.manuOnClick(e,item.label)

不正确，应该是

onClick={(e)=>this.manuOnClick(e,item.label)

尝试这个 ：

manuOnClick=(e, label)=>{
     let newState = this.state.items.map(item=>{
             if(label === item.label)
             {   
                 let newItem={
                     label:label,
                     active:true
                 }
                 return newItem   
             }
             else
             {
                 return item
             }
     })

     this.setState({
          items:newState
     })
}



this.state.items.map(item => {
            return <li onClick={(e)=>this.manuOnClick(e,item.label)}>{item.label}</li>
        })