React：在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时，因此当事件发生时它将为false。

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

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

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