如何在组件层次结构中访问输入值？

-1

可以说，我有下面的代码在我的反应成分三级深<Foo><Bar><InputBox/><Bar></Foo>其中“的InputBox”是一个演示组件如何在组件层次结构中访问输入值？

<input type="text" id="inputBox" ref="inputBox" name="inputBox" value={this.state.inputVal} onChange={this.handleChange} />

我想获得的输入值在我的容器组件来执行的形式验证。我可以用香草味JS

document.getElementById('inputBox').value

或使用阵营裁判得到的值（但是，当我的裁判是非常深刻的下方一个不工作）

this.refs.inputBox.value

我想知道哪种方法在性能方面更好，为什么？并想知道如何使用React的ref方法访问组件层次结构深处的输入值？

来源

2016-08-02 Galeel Bhasha

的[findDOMNode可能的复制VS的getElementById用于普通DOM元素]（http://stackoverflow.com/questions/36415198/finddomnode-vs-getelementbyid-for-plain-dom-elements） – Miah

@Miah我现在更新了这个问题 –

-4

我会为此使用innerHTML。

var input = document.GetElementByID('inputBox').innerHTML;

您现在可以使用该输入变量进行验证。

来源

2016-08-02 23:10:05

由于'document.GetElementByID'不存在，并且自从input元素的'innerHTML'属性不会做任何事情......这不会远程有用。 – Quentin

这是一个非常糟糕的答案。不要这样做。 –

使用文献。但是......

虽然串裁判没有过时，它们被认为是传统的，并可能会在未来的某个时刻被弃用。回调裁判是首选。 - FB https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute

因此，而不是像做<input ref={el => this.inputEl = el} />，并访问值this.inputEl.value。

几个小点：

input="text"是没有必要的。这是默认的
避免的ID，他们不能很好地扩展（例如，如果在页面的其他地方的另一个元素会得到相同的ID，你有无效的HTML）

来源

2016-08-02 23:51:48

感谢您的回答。我知道回调参考，但我的输入框是动态创建的。我不知道如何为动态创建的输入字段创建回调引用（输入是在.map循环内创建的）所以我现在使用字符串引用如下... '' –

如何在组件层次结构中访问输入值？

回答

相关问题