javascript - react : set all objects keys in state to 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。

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>
        })