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

Posted 2023-02-22

【中文标题】如何在 ReactJS 中的事件上添加或删除类名？

【英文标题】：How to add or remove a className on event in ReactJS?

【发布时间】：2015-04-28 05:28:18

【问题描述】：

我对 React 还是很陌生，我在将我的想法从标准 js 转换过来时有点挣扎。

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

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

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

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

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

谁能指出我正确的方向？

【参考方案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 将触发组件的重新渲染。

【讨论】：

你也可以使用classSet()插件助手：facebook.github.io/react/docs/class-name-manipulation.html

我有一个元素列表，当我在我的解决方案中实现它时，列表中所有元素的类都会发生变化。我希望它只更改列表中的一项，即我单击的一项。有什么解决办法吗？

对于临时O'rary人员：对于元素列表，可能您还没有绑定点击处理程序。在带有onClick=() => this.handleClick 之类的元素中或在您的构造函数中：this.handleClick = this.handleClick.bind(this); 和在您的handleClick 中，使状态为特定元素（例如this.setState(someName)），而不仅仅是通用clicked: true

@TempO'rary 在您的点击处理程序中设置一些状态，即被点击项目的 id 或索引，然后在渲染中，如果当前项目是被点击项目，则渲染备用类。

【参考方案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

【讨论】：

当您想要更改多个元素中的一个时，这是一个很好的响应。谢谢！

如果重新渲染目标，那么这个类就不再存在了！

这是 React 中的反模式，请避免这样做。

【参考方案3】：

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

如果您使用的是函数组件，则可以使用useState 挂钩：

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

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

【参考方案4】：

上述每个解决方案都是关于在单击时设置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>

【参考方案5】：

要做到这一点，你可以使用 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

【参考方案6】：

让我们有一个 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")
   

【讨论】：

当我使用 ReactDOM.findDOMNode 时，我的 linter 很快就抱怨了。不要使用 findDOMNode。它不适用于函数组件，并且在 StrictMode 中已弃用。见reactjs.org/docs/react-dom.html#finddomnodeeslintreact/…

这不是 React 的使用方式。