javascript - 从通过 map 呈现的序列的单个 div 中删除类

Question

我正在渲染一系列包含一些内容和一个按钮的 div。所有的 div 都有一个特定的类，它们也有一个按钮。当我单击该按钮时，我想删除它所属的 div 类。我的渲染代码如下所示:

render () {
  return (
    <div>
      {
        arr.map(x => {
          return (
            <div className={this.state.displayClass ? 'someClass' : ''}>
              <button onClick={() => this.handleClick()}> Remove class <button>
            </div>
          )
        })
      }
    </div>
  )
}

对于按钮点击，我只是将 displayClass 设置为 false，然后我成功删除了 div:

handleClick () {
  this.setState({ displayClass: false })
}

这里的问题显然是我这样做的方式，它会从所有 div 中删除所有类。所以我的问题是如何让每个按钮都单击以仅从它自己的 div 中删除类？

Answer 1

只需将每个 div 提取到具有自己状态的单独组件中:

class ClassManagableDiv extends PureComponent {
  state = {
    displayClass: true
  };

  handleClick = () => {
    this.setState({ displayClass: false })
  }

  render() {
    return <div className={this.state.displayClass ? 'someClass' : ''}>
      <button onClick={this.handleClick}> Remove class </button>
    </div>
  }
}

然后将它应用到您的数组:

render () {
  return (
    <div>
      {
        arr.map(x => <ClassManagableDiv />)
      }
    </div>
  )
}