将 ToggleClass 事件附加到 ReactJS 中的未来元素答案

【问题标题】：Attach ToggleClass events to future elements in ReactJS将 ToggleClass 事件附加到 ReactJS 中的未来元素
【发布时间】：2018-09-25 07:55:42
【问题描述】：

我有多个通过循环动态呈现的 Div 元素。

我正在努力，

将 onClick 事件附加到动态呈现的元素。
通过 onClick 函数切换类。

类名只能切换到被点击的 span 元素。但是下面代码的问题是，类被切换到通过这个循环呈现的所有 span 元素。

但我只需要将类切换到被点击的特定元素。

虽然不是准确/完整的代码，但基本结构如下所示，

constructor(props) {
    super(props);
    this.state = {
      classnm: 'collapsed',
    };
  }

func2 = event => {
  let currentClass = this.state.classnm;
  if(currentClass == 'collapsed') {
    this.setState({classnm: 'expanded'});
  }
  else {
    this.setState({classnm: 'collapsed'});
  }
};

render() {
    return (
        <div>
           <Iterate>{this.renderIndexColumn}</Iterate>             
        </div>
    );
  }

  // The below function gets called at least 10 times, rendering the below span element at least 10 times.

  renderIndexColumn = () => {
    return (
      <div>
      <span id={data.RefId} className = {this.state.classnm} onClick={(event) => {this.func2(event)}}>
          <i className="material-icons">arrow_right</i></span>
      </div>
    );
  };

如果是 JQuery，我会使用“on”、“this”来定位特定元素和 toggleClass。我不确定如何在 React 中做同样的事情。

有人可以帮助实现这一目标吗？谢谢。

【问题讨论】：

标签： reactjs

【解决方案1】：

您无需将className 设置为this.state.classnm。只需这样做：

<span id={data.RefId} className = 'collapsed'  ... />

然后你的func2 应该是这样的：

func2 = event => {
  event.target.classList.toggle('collapsed')
};

【讨论】：

@Dexter，要不要回复一下？
@streletss，非常感谢。有用。它将类附加到内部元素。很抱歉延迟回复。
我还有一个与此相关的问题，但不是实际问题的一部分。有没有办法，如果特定元素对 DOM 隐藏，我可以删除添加的类。现在，添加的类与元素保持一致，即使它被隐藏并重新出现（不是重新渲染，只是暂时从 DOM 中隐藏）。谢谢
[].forEach.call(document.querySelectorAll('.collapsed'), el => el.classList.remove('collapsed'))