Question

如何在ReactJS中获取嵌套的表单元素值？

示例

假设我有一个包含以下元素的表单：

<form onSubmit={handleSubmit(e)}>
  <input ref="name" type="text" />
  { /* possibly unlimited number of emails */ }
  <input ref="email[]" type="text" />
  <input ref="email[]" type="text" />
  { /* possibly unlimited number of book objects */ }
  <fieldset>
    <input ref="title" type="text" />
    <input ref="author" type="text" />
  </fieldset>
  <fieldset>
    <input ref="title" type="text" />
    <input ref="author" type="text" />
  </fieldset>
</form>

我想获取这些字段的值onSubmit。最简单的方法也是最直观的方式：

this.refs

但它会压平所有引用并仅返回最后一个数组元素。所以它会返回类似的东西：

{ name: '', email[]: '', title: '', author: '' }

我想得到的应该是这样的：

{ name: '',
  email:['', ''],
  books: [
    { title: '', author: '' },
    { title: '', author: '' }
  ]
}

或类似的东西。

也许使用refs不是最佳选择，但我不确定是否有其他选择。

修改执行：

e.target.childNodes

返回类似于我想要实现的内容，但它返回纯HTML节点，因此从中获取值非常多（编写一些自定义方法来处理节点树）。

Answer 1

如果input有某种ID或key，您可能会这样做：

<input key="[YOUR_KEY]" type="text" onChange={ (e) => { this.setState({
    [YOUR_KEY]: e.currentTarget.value
}); } } />

然后你可以直接从州里引用所有的值。

该密钥甚至可以是任意增量数字：

<input key="email_1" type="text" onChange={ (e) => { this.setState({ email_1: e.currentTarget.value }); } } />
<input key="email_2" type="text" onChange={ (e) => { this.setState({ email_2: e.currentTarget.value }); } } />
<input key="email_3" type="text" onChange={ (e) => { this.setState({ email_3: e.currentTarget.value }); } } />
<input key="email_4" type="text" onChange={ (e) => { this.setState({ email_4: e.currentTarget.value }); } } />

然后，您可以引用第二个电子邮件字段，例如this.state.email_2。

反映嵌套的表单值

1 个答案: