Question

所以我有ItemForm。在此表单中，有一个名为name的动态输入字段。它是动态的原因是，如果用户使用三种语言，例如英语，俄语和中文，则name将有三个输入字段，每种语言类型English Name，{{ 1}}，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来获取输入字段的数据，除非我指定所有类型的语言，否则我无法获取这些输入字段的数据......

如何在不指定所有类型语言的情况下从动态输入字段获取数据？

提前致谢..

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的方式，可能需要稍微细微处理，但我希望这能证明原则。

如何使用React Js获取表单动态输入数据？

1 个答案: