javascript - 如何在 event.target-Js/ReactJs 上添加类名

Question

我有一个 onclick 处理程序:

render() {
  return (
    <div>
      <div className={className} onClick={this.target.bind(this,id)}>{name}</div>
    </div>
  )
}

函数如下:

target(test, event) {
  event.target.className="addClasss";  
}

我正在尝试使用上述方法在事件目标上添加类，但是有更好的方法吗？谢谢

Answer 1

无需手动将类添加到 DOM 元素，例如，您可以添加一个额外的状态变量，用于跟踪已单击的元素。然后，您可以在渲染方法中使用它来选择应该将类添加到哪个元素。

示例

class App extends React.Component {
  state = {
    arr: [{ id: 1, name: "foo" }, { id: 2, name: "bar" }],
    clicked: null
  };

  target(id) {
    this.setState({ clicked: id });
  }

  render() {
    const { arr, clicked } = this.state;

    return (
      <div>
        {arr.map(element => (
          <div
            className={clicked === element.id && "addClass"}
            onClick={this.target.bind(this, element.id)}
          >
            {element.name} {clicked === element.id && "clicked!"}
          </div>
        ))}
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id="root"></div>