如何使用React Js獲取表單動態輸入數據？

Question

所以我有一個ItemForm。在這種形式下，有動態輸入字段name。動態的原因是，如果用戶使用三種語言（例如英語，俄語和中文），則會有三個輸入字段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，他們可以觸發一個onChange回調，其更新組件的state。這樣，數據將可用，而無需檢查DOM。

注意 - 你還需要的投入value屬性設置爲從state值，否則用戶將無法輸入任何文字。

例如：

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]} /> 
}) 

在處理程序的東西給出這樣的：

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

這可能需要根據這樣你的組件使用其state要稍微細緻入微，但我希望這表明了原則。