如何在ReactJS中的事件上添加或删除className

Question

我对React很陌生,我正在努力将我的想法从标准的js中转换出来.

在我的react组件中,我有以下元素:

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

我正在寻找的行为是在点击时添加一个额外的类.我的第一个想法是尝试在点击处理函数中添加类,例如

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

我没有找到任何类似的例子,所以我很确定我没有以正确的方式思考这个问题.

谁能指出我正确的方向？

Answer 1

类的列表可以从组件的状态派生.例如:

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>;
  }
});

调用this.setState将触发组件的重新呈现.

Answer 2

您只能使用普通的JS：event.target和classList

handleClick = event => event.target.classList.add('click-state');

render() {
  return <div className="base-state" onClick={this.handleClick}>click here</div>;
}

https://developer.mozilla.org/zh-CN/docs/Web/API/Event/target

https://developer.mozilla.org/zh-CN/docs/Web/API/Element/classList

Answer 3

您可以在单击处理函数中设置单击状态，并使用它通过模板文字有条件地设置类名称。

如果您使用的是函数组件，则可以使用钩子这样做useState：

const [clicked, setClicked] = useState(false);

<div className={ `base-state ${clicked && 'click-state'}` } onClick={ () => setClicked(true) }>click here</div>