我对 React 还是很陌生，我在将我的想法从标准 js 转换过来时有点挣扎。
在我的反应组件中，我有以下元素：
<div className='base-state' onClick={this.handleClick}>click here</div>
我正在寻找的行为是在点击时添加一个额外的类。我的第一个想法是尝试在点击处理函数中添加类，例如
handleClick : function(e) {
<add class "click-state" here>
}
我还没有找到任何类似的例子，所以我很确定我没有以正确的方式思考这个问题。
谁能指出我正确的方向？
【问题讨论】：
标签： javascript node.js reactjs
类列表可以从组件的状态派生。例如：
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 将触发组件的重新渲染。
【讨论】：
classSet()插件助手：facebook.github.io/react/docs/class-name-manipulation.html
onClick={() => this.handleClick} 之类的元素中或在您的构造函数中：this.handleClick = this.handleClick.bind(this); 和在您的handleClick 中，使状态为特定元素（例如this.setState({someName})），而不仅仅是通用clicked: true
您可以只使用 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 类。
【讨论】：
您可以在点击处理函数中设置点击状态，并使用模板文字有条件地设置类名。
如果您使用的是函数组件，则可以使用useState 挂钩：
const [clicked, setClicked] = useState(false);
<div className={ `base-state ${clicked && 'click-state'}` } onClick={ () => setClicked(true) }>click here</div>
【讨论】：
上述每个解决方案都是关于在单击时设置className='click-state'，但如果双击时已经存在则不删除类。如果有人在使用函数式组件，则可以通过使用useState 钩子和一些条件语句来实现此行为。
const [clicked, setClicked] = useState('');
const handleClick = () => {
clicked ? setClicked('') : setClicked('base-state click-state');
};
<div className={clicked || 'base-state' } onClick={handleClick}>click here</div>
【讨论】：
要做到这一点，你可以使用 Vanilla javascript，但这可能不是 react 的标准做法。
所以你可以在这里做：
let className = 'base-state';
if (this.props.isActive) {
className += ' click-state';
}
return <span className={className}>Menu</span>
}
为了更容易，您可以使用一个名为 classnames
的 npm 包您可以通过此链接访问Npm package。
更多参考，可以访问官方React-docs
【讨论】：
让我们有一个 div 块：
<div id={props.id} key={props.id}
onMouseEnter={() => onMouseEnter(props.id)}
onMouseLeave={() => onMouseLeave(props.id) }
className="other fixed classes"
</div>
要添加和删除新类而不影响旧类，我们可以使用 onMouseEnter/ onMouseLeave 事件或其他类似的点击事件：
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")
}
【讨论】：