如何在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