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

我正在处理我的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> 
    )

来源

2016-11-13 spaceDog

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

来源

2016-11-13 20:21:08

使用表单时作出反应，我建议参照本question。

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

来源

2016-11-13 20:24:14

我们可以使用onSubmit来获取“表单提交对象”。 .target的事件引用了表单，并且可以在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>

来源

2016-11-13 21:10:40 DarkKnight

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

回答

相关问题