javascript - react : Removing a class styling after componentWillUpdate

Question

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

//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。

最后在您的渲染方法中，使用此变量来确定是否必须将类名添加到 DOM 元素中

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

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