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

Question

我正在尝试创建一个组件，在该组件中我有一堆来自数组的盒子，可以分别单击每个盒子，将它们打开和关闭。

当前，只能将阵列中的单个项目“打开”（以绿色显示），但是，我希望能够分别打开/关闭每个项目。

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

我该如何实现？

我的点击事件：

  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

  }

这是一个Codepen