Question

我正在研究我的React项目。我有一个关于如何在用户提交所有输入信息时捕获整个表单对象的问题。例如，在Node.js Mongoose中，req.body返回整个对象。

如何在反应中获取整个表单提交对象？谢谢。

这是我在React中的表单代码：

return (
      <div>
        <ol>
          {listItems}
          <div style={styles.input}>
            <form>
              <input onChange={this.updateUsername.bind(this)} id='image' className='form-control' type='text' placeholder='image'/><br />
              <input onChange={this.updateUsername.bind(this)} className='form-control' type='text' placeholder='Username'/><br />
              <input className='form-control' type='text' placeholder='Age'/><br />
              <input className='form-control' type='text' placeholder='Gender'/><br />
              <input className='form-control' type='text' placeholder='Activity'/><br />
              <input className='form-control' type='text' placeholder='Location'/><br />
              <input className='form-control' type='text' placeholder='ZipCode'/><br />
              <button onClick={this.submitComment.bind(this)} className='btn btn-primary'>Submit Activity</button>
            </form>

          </div>
        </ol>

      </div>
    )

Answer 1

我建议在使用React中的表单时引用此question。

但是，对于您的实际问题，我认为没有办法从表单中接收整个对象。你应该做的是设置每个输入字段值的状态，并在提交函数中使用状态。

Answer 2

我们可以使用onSubmit来获取＆＃34;表单提交对象＆＃34;。 .target事件引用表单，输入元素可以在form.elements中找到。

＆＃13;

function submitData(form) {
  return [].slice.call(form.elements).reduce((data, {name, value}) => {
    if (name) data[name] = value
    return data
  }, {})
}

class App extends React.Component {
  handleSubmit(event) {
    event.preventDefault()
    this.setState(submitData(event.target))
  }
  render() {
    return (
<form onSubmit={this.handleSubmit.bind(this)}>
  <input name="username" placeholder="Username" />
  <input name="age" placeholder="Age" />
  <button type="submit">Submit</button>
  <pre>{JSON.stringify(this.state || {}, null, 2)}</pre>
</form>
  )}
}

ReactDOM.render(<App />, document.querySelector('#app-root'))

＆＃13;

<div id="app-root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

＆＃13;

如何在React中捕获整个输入对象

3 个答案: