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（）与使用状态

回答

相关问题