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

Answer 1

我要做的是创建一个具有自己事件状态的 Box 组件，并将其传递给 renderBoxes 中的 map 。这样做的好处是每个 Box 组件都有自己独立于父组件的状态。这样一来，您可以让多个组件处于事件状态。

所以...

class Box extends React.Component {
  constructor(props){
    super(props)
    this.state={
      active: false
    }
  }

  clickHandler = () => {
    this.setState({active: !this.state.active})
  }

  render(){
    const { key, children }= this.props
    return (
      <button
            key={key}
            style={{...style.box, background:     this.state.active ? 'green' : ''}}
            onClick={() => this.clickHandler()}
          >
            {children}
          </button>
    )
  }
}

然后让 renderBoxes 成为...

renderBoxes = () => {

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

      return options

  }

here is the codepen我 fork 了你的。