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

Question

我是 React 的新手，我在将我的想法从标准 js 转换过来时遇到了一些困难。

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

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

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

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

您可以只使用 Vanilla JS（event.target 和 classList）：

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

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

但不要那样做！

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

Event.target

Element.classList

React / Styling and CSS

Answer 3

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

如果您使用的是功能组件，则可以使用 useState 挂钩以这种方式完成：

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

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

Answer 4

以上每个解决方案都是关于在单击时设置 className='click-state' 但不会删除 class（如果双击时已经存在）。如果有人正在使用功能组件，可以通过使用 useState 挂钩和一些条件语句来实现此行为。

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

const handleClick = () => {
  clicked ? setClicked('') : setClicked('base-state click-state');
};

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

Answer 5

好吧，你可以使用 Vanilla javascript 但这可能不是反应中的标准做法。

所以你可以做的是：

let className = 'base-state';
  if (this.props.isActive) {
    className += ' click-state';
  }
  return <span className={className}>Menu</span>
}

为了方便起见，您可以使用名为 classnames

的 npm 包

您可以通过这个link访问Npm package。
更多参考，可以访问官方React-docs

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

How to add or remove a className on event in ReactJS?

javascript

node.js

reactjs