如何在組件層次結構中訪問輸入值？

-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循環內創建的）所以我現在使用字符串引用如下... '' –

如何在組件層次結構中訪問輸入值？

回答

相關問題