Question

我有多个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中做同样的事情。

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

Answer 1

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

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

然后您的func2应该类似于：

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

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

1 个答案: