this.refsとフォームの使用のための反応の値

Question

あなたはどのようにフォーム提出を行いますか？私はフォームを作るのに問題はないが、2つの異なるアプローチを見た。個人的に私は、別のアプローチは、REFを使用している私はそれが働いていたが、わからない、これは良いアプローチです。この

handleInputChange =() => (
    const username = e.target.username.value; 
) 

を行います入力値を取得するために

<input onChange={this.handleInputChange} value={this.state.username} type="text" name="username" /> 

フォーム値をバインドするために状態を使用しています。

良いことは、単にこの

this.refs.username.value 

を行うと、あなたはこの<input ref="username" type="text" />

しかし、どのようにユーザー名の値を設定したいとウル要素を持っているのonSubmitで、すべてのフィールド上のonChangeを置く必要はありません最初の負荷がajaxの場合は？

Answer 1

他のやり方がない限り、参考文献を使用しないことをおすすめします。 https://facebook.github.io/react/docs/refs-and-the-dom.html

値を状態にバインドするあなたのアプローチは、行く方法のようです。

Answer 2

onChange（一方向バインディング）を使用することの良い点は、入力データを完全に制御できることです。

言って、あなただけのアルファベット

handleInputChange =() => (
    // you can have validation code here to check if the 
    // input has only alphabets and return if otherwise 
    const username = e.target.username.value; 
)