React Jでフォームの動的入力データを取得するにはどうすればよいですか？

Question

だから私はItemFormを持っています。このフォームには、nameという動的入力フィールドがあります。動的である理由は、英語、ロシア語、中国語など、ユーザーが使用する3つの言語がある場合はnameの入力フィールドがあり、各言語タイプはEnglish Name,Russian Name,Chinese Nameとなります。

これを行うには、ItemFormのコードを以下のように作成しました。
const itemLanguages = product.languages.map((language) => { return <input key={language.id} ref={language.name} id={language.id} placeholder={language.name + ' Name'} type="text" required="true" /> })

languagesに応じて動的入力フィールドを生成しても問題ありません。しかし、私は入力データを取得する方法の問題があります。私は入力フィールドのデータを取得するのにrefを使用しているので、すべてのタイプの言語を指定しないと、これらの入力フィールドのデータを取得できません...

すべてのタイプの言語を指定せずにデータを取得するにはどうすればよいですか？

事前に感謝..

Answer 1

あなたはこれらのcontrolled inputsを作る場合は、コンポーネントのstateを更新onChangeコールバックを発射することができます。そうすれば、DOMを調べなくてもデータを利用できるようになります。

注 - あなたはまた、それ以外の場合は、ユーザーが任意のテキストを入力することができませんstateから値への入力のvalue属性を設定する必要があります。例えば

：

ハンドラはのようなもので与えられる

const itemLanguages = product.languages.map((language) => { 
    return <input 
    key={language.id} 
    placeholder={language.name + ' Name'} 
    type="text" 
    required="true" 
    onChange={this.onChange.bind(this, language.name)} 
    value={this.state[language.name]} /> 
}) 

：これはあなたのコンポーネントがそのstateを使用していますが、私は願って仕方によって若干ニュアンスが必要になる場合があり

onChange (languageName, evt) { 
    this.setState({ [languageName]: evt.target.value }) 
} 

それは原理を実証している。