Javascript 如何在React JS中启用/禁用数组中的元素？

我正在尝试创建一个组件，其中我有一个数组中的一组框，当分别单击每个框时，可以打开和关闭这些框

目前，只能“打开”阵列中的单个项目（项目变为绿色），但是，我希望能够单独打开/关闭每个项目

与一个元素交互不应影响任何其他元素

我如何做到这一点

我的点击事件：

  handleOnClick = (val, i) => {
    this.setState({active: i}, () => console.log(this.state.active, 'active'))
  }

渲染框：

 renderBoxes = () => {

    const options = this.state.needsOptions.map((val, i) => {
        return (
          <button
            key={i}
            style={{...style.box, background: i === this.state.active ? 'green' : ''}}
            onClick={() => this.handleOnClick(val, i)}
          >
            {val}
          </button>
        )
      })

      return options

  }

renderBoxes=（）=>{
const options=this.state.needsOptions.map（（val，i）=>{
返回(
这个.handleOnClick（val，i）}
>
{val}
)
})
返回选项
}

---

这里有一个

我要做的是创建一个具有自己活动状态的

框

组件，并将其传递到

渲染器中的地图

。这样做的好处是，每个长方体组件都有自己独立于父组件的状态。这样，可以使多个零部件处于活动状态

所以

类框扩展了React.Component{
建造师（道具）{
超级（道具）
这个州={
活动：错误
}
}
clickHandler=（）=>{
this.setState（{active:！this.state.active}）
}
render（）{
const{key，children}=this.props
返回(
this.clickHandler（）}
>
{儿童}
)
}
}

那么让渲染器

renderBoxes = () => {

    const options = this.state.needsOptions.map((val, i) => {
        return (
          <Box
            key={i}
          >
            {val}
          </Box>
        )
      })

      return options

  }

renderBoxes=（）=>{
const options=this.state.needsOptions.map（（val，i）=>{
返回(
{val}
)
})
返回选项
}

---

我把你的分开。

要存储一堆盒子的状态，你需要一个布尔数组，比如

[true，false，false]

。您当前只有一个变量存储索引。

renderBoxes = () => {

    const options = this.state.needsOptions.map((val, i) => {
        return (
          <Box
            key={i}
          >
            {val}
          </Box>
        )
      })

      return options

  }