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中的地图。这样做的好处是每个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我从你的分支里掏了钱。

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

1 个答案: