ReactJS - getDOMNode（）與使用狀態

我工作的一個陣營搜索組件，並需要得到搜索字段（文本字段）的值。ReactJS - getDOMNode（）與使用狀態

是更好的做法是與使用getDOMNode（）一個ref或使用setState()當字段的值發生變化？：

this.refs.searchInput.getDOMNode().value

onChanged(e) { 
    setState({ 
     fieldValue = e.target.value; 
    }); 
}

編輯：

此外，我讀過無數次，如果你可以避免修改狀態，那麼你應該。在這種情況下，我們有一種通過使用ref來避免狀態的方法，那麼我們應該如何？

來源

2015-12-01 Sev

地看到，建議修改狀態引用這將是有趣的，不推薦，尤其是這是最常用的模式是修改國家自上而下的組件，而不是DOM的直接操作。例如，在React文檔中，有一個完整的示例將狀態用於搜索字段：https：//facebook.github.io/react/docs/thinking-in-react.html – WiredPrairie

如果創建搜索輸入一個陣營組件內則沒有必要使用ref，只需使用回調參數作爲你的第二個代碼示例。

onChanged(e) { 
    this.state({fieldValue: e.target.value}); 
}

該約定有助於他人閱讀您的代碼並對其邏輯做出正確的假設。

由於擡起頭，如果你的使用.getDOMNode()並沒有得到錯誤的話，我會用你稍微舊版本的反應承擔。未來this.refs.searchInput將是實際的DOM節點。查看與操縱反應以外DOM其他庫處理時here

另外參通常使用。比如jQuery。一個常見的例子是

componentDidMount(){ 
    $(this.refs.myref).SomeJqueryLibrary({}); 
}

來源

2015-12-01 19:09:35 enjoylife

那麼你是否建議更新狀態在這種情況下？（我不是不希望使用jQuery） – Sev

是的，所以你的'調用onChanged（E）'例子是最好的 – enjoylife

我讀過無數次，如果你能避免修改狀態，那麼你應該。爲什麼在這裏有一種不使用狀態的方法，但最好使用它呢？ – Sev

-2

裁判更好，因爲你沒有複製的狀態。在第二個示例中，如果該字段的狀態和內容以某種方式變爲desynce，那麼就有潛在的錯誤。

來源

2015-12-01 18:58:58 MattPutnam

ReactJS - getDOMNode（）與使用狀態

回答

相關問題