So erfassen Sie das gesamte Eingabeobjekt in React

Question

Ich arbeite an meinem React-Projekt. Ich habe eine Frage darüber, wie man das gesamte Formularobjekt erfasst, wenn der Benutzer alle Eingabeinformationen eingibt. In Node.js Mungo gibt beispielsweise req.body das gesamte Objekt zurück.

Wie kann ich das gesamte Formular einreichen Objekt in reagieren? Vielen Dank.

Dies ist meine Form Code in Reaktion:

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

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> 
"); 

Answer 2

I dieser question empfiehlt Bezug, wenn Arbeiten mit Formularen in React.

Allerdings, zu Ihrer eigentlichen Frage, ich glaube nicht, gibt es eine Möglichkeit, das gesamte Objekt aus dem Formular zu erhalten. Was Sie tun sollten, ist der Status des Werts jedes Eingabefeldes und der Status in der Submit-Funktion.

Answer 3

Wir können onSubmit verwenden, um das "Formular senden Objekt" zu erhalten. .target des Ereignisses verweist auf das Formular, und Eingabeelemente können in form.elements gefunden werden.

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>