反應：刪除componentWillUpdate後的類樣式

如何在組件更新後刪除類？例如，反應：刪除componentWillUpdate後的類樣式

//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'); 
}

來源

2017-04-18 Demon

只需添加''或者類似的東西。如果你不需要問題，你應該從你的項目中刪除jQuery。 – elmeister

如果有超過100個我需要更改的字段，那將不可能。我正試圖做動態的。 – Demon

一前一後不應該利用jQuery來更新使用React呈現的DOM元素。

爲什麼：原因是React呈現組件當state/props變化。這種重新渲染會覆蓋jQuery所做的更改，並且會讓您無可奈何。

解決方案：爲每個需要採取的邏輯操作保持一個狀態。

對於您的情況，您需要維護一個booleanstate變量以指示組件是否已更新。最初，如果你的構造函數是錯誤的（類似於下面）。

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

當你的邏輯命中，使用this.setState({isUpdated: true})更新此狀態變量設置爲true，當事件處理程序使其爲false使用this.setState({isUpdated: false})所以當事件發生時，這將是錯誤的。

在渲染方法，利用這個變量來確定類名已被添加到DOM元素或如果使用太多的邏輯來處理 classNames那麼不喜歡

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

最後我建議你使用this library

來源

2017-04-18 17:48:43 Panther

請注意，您無法在此處調用this.setState（）。如果您需要更新狀態以響應支柱更改，請改用componentWillReceiveProps（）。（https://facebook.github.io/react/docs/react-component.html#componentwillupdate） – Manolo

@Manolo，這是正確的一個不應該在'componentWillUpdate'中使用'setState'。 – Panther

如果我需要更新狀態，你會如何調用componetWillRecieveProps？ – Demon

反應：刪除componentWillUpdate後的類樣式

回答

相關問題