javascript - react 嵌套的表单值

如何在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节点，因此从它们中获取值需要大量工作（编写一些用于处理节点树的自定义方法）。

最佳答案

如果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引用第二个电子邮件字段。

关于javascript - react 嵌套的表单值，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37762991/