React：在 componentWillUpdate 之后删除 class 样式

Question

如何在组件更新后删除 class？例如，

//fire update where fieldname is array of changed fields
componentWillUpdate(){
   $(`.input-${fieldName}`).addClass('highlight');
}

我想在单击事件处理程序后触发此函数

removeFields (fieldName) {
     //remove highlight updated field name when it is updated
     $(`.input-${fieldName}`).removeClass('highlight');
}

Answer 1

不应使用 jQuery 来更新使用 React.

呈现的 DOM 元素

原因： 原因是 React 在 state/props 更改时渲染组件。这种重新渲染会覆盖 jQuery 所做的更改，让您束手无策。

解决方案：为您需要执行的每个逻辑操作维护一个状态。

在您的情况下，您需要维护一个 boolean state 变量来指示组件是否已更新。如果您的构造函数（类似于下面），最初它将是错误的。

constructor() {
 this.state = {
  isUpdated: false
 }
}

当您的逻辑命中时，使用 this.setState({isUpdated: true}) 将此状态变量更新为 true，当事件处理程序使用 this.setState({isUpdated: false}) 将其设置为 false 时，它会在事件发生时为 false。

最后在你的 render 方法中，使用这个变量来确定类名是否必须添加到 DOM 元素中，或者不像

 render() {
  // ....
  <input className={`input-myField ${this.state.isUpdated ? 'highlight' : ''}`} />
  // ....
 }

如果您使用过多的逻辑来处理 classNames 那么我建议您使用 this library

React: Removing a class styling after componentWillUpdate