How to capture entire input object in React

Question

I am working on my React project. I have a question on how to capture entire form object when user submit all the inputs information. For example, in Node.js Mongoose, req.body returns entire object.

How can I get the entire form submit object in react? Thanks.

This is my form code in 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>
    )

score 0 · Answer 1 · answered Nov 13 '16 at 20:21

function wr(e,v){e.innerHTML=v;}

wr(document.body,"
  <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>
");

score 0 · Answer 2 · edited May 23 '17 at 12:01

0

I suggest referring to this question when working with forms in React.

However, to your actual question, I don't think there is a way to receive the entire object from the form. What you should do, is set the state of each input field's value, and use the state in the submit function.

edited May 23 '17 at 12:01

Community

1
1

answered Nov 13 '16 at 20:24

Dor Weid

456
2
7

score 0 · Answer 3 · answered Nov 13 '16 at 21:10

We can use onSubmit to get the "form submit object". .target of the event references to the form, and input elements can be found in form.elements.

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'))

<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>

How to capture entire input object in React

3 Answers3