时间戳

首页 > 解决方案 > 如何在 event.target-Js/ReactJs 上添加类名

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

问题描述

我有一个 onclick 处理程序：

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

这是功能：

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

我正在尝试上述方法在事件目标上添加类，但是有没有更好的方法来做到这一点？谢谢

标签： javascriptreactjs

解决方案

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

例子

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>

推荐阅读