Javascript 如何在ReactJS中添加或删除事件上的类名？

我是一个全新的反应者，我正在努力将我的想法从标准js转换过来

在我的react组件中，我有以下元素：

<div className='base-state' onClick={this.handleClick}>click here</div>

点击这里

我正在寻找的行为是在单击时添加一个额外的类。我的第一个想法是尝试在click handler函数中添加类，例如

handleClick : function(e) {
   <add class "click-state" here>
}

handleClick:函数（e）{
}

我还没有找到任何类似的例子，所以我相当肯定我没有用正确的方式思考这个问题

---

有人能给我指出正确的方向吗？

可以从组件的状态派生类列表。例如：

var Component = React.createClass({
  getInitialState: function() {
    return {
      clicked: false
    };
  },

  handleClick: function() {
    this.setState({clicked: true});
  },

  render: function() {
    var className = this.state.clicked ? 'click-state' : 'base-state';
    return <div className={className} onClick={this.handleClick}>click here</div>;
  }
});

var Component=React.createClass({
getInitialState:函数（）{
返回{
单击：false
};
},
handleClick:function（）{
this.setState（{单击：true}）；
},
render:function（）{
var className=this.state.clicked？'click state'：'base state'；
返回点击这里；
}
});

---

调用将触发组件的重新加载。

您可以只使用一个普通的JS（

event.target

和

classList

）：

handleClick=event=>event.target.classList.add（'click-state'）；
render（）{
返回点击这里；
}

但不要这样做

React应该处理DOM中的更改，因此依赖于通过React修改CSS类

---

让我们有一个div块：

<div id={props.id} key={props.id} 
    onMouseEnter={() => onMouseEnter(props.id)}
    onMouseLeave={() => onMouseLeave(props.id) } 
    className="other fixed classes"
</div>

---

您还可以使用

classSet（）

addon助手：我有一个元素列表，当我在解决方案中实现这个时，列表中所有元素的类都会发生变化。我希望它只更改列表中的一项，即我单击的一项。有什么解决方案吗？对于临时用户：对于元素列表，您可能还没有绑定click处理程序。在类似于

onClick={（）=>this.handleClick}

的元素中，或者在构造函数中：

this.handleClick=this.handleClick.bind（this）

并在handleClick中，将状态设置为特定元素（

this.setState（{someName}）

），而不仅仅是泛型的

clicked:true

@TempO'rary在单击处理程序中设置一些状态，即单击项的id或索引，然后在渲染中，如果当前项是单击的项，则呈现备用类。当您希望从多个元素中更改一个元素时，这是一个很好的响应。谢谢如果目标重新渲染，则该类不再存在！这是React中的反模式，请避免这样做。当我使用ReactDOM.findDOMNode时，我的linter很快就抱怨了。不要使用findDOMNode。它不适用于功能组件，在StrictMode中不推荐使用。看，这不是React的使用方式。

<div id={props.id} key={props.id} 
    onMouseEnter={() => onMouseEnter(props.id)}
    onMouseLeave={() => onMouseLeave(props.id) } 
    className="other fixed classes"
</div>

   const onMouseEnter = (id) => {
    let element = document.getElementById(id)
    ReactDOM.findDOMNode(element).classList.add("myNewClass") 
   }

   const onMouseLeave = (id) => {
    let element = document.getElementById(id)
    ReactDOM.findDOMNode(element).classList.remove("myNewClass")
   }