blocks|key|4628414|text|使用输入上的change事件来更新组件的状态并在handleLogin中访问它|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4628415|handleEmailChange:+function(e)+{
+++this.setState({email:+e.target.value});
},
handlePasswordChange:+function(e)+{
+++this.setState({password:+e.target.value});
},
render+:+function()+{
++++++return+(
++++++++<form>
++++++++++<input+type="text"+name="email"+placeholder="Email"+value={this.state.email}+onChange={this.handleEmailChange}+/>
++++++++++<input+type="password"+name="password"+placeholder="Password"+value={this.state.password}+onChange={this.handlePasswordChange}/>
++++++++++<button+type="button"+onClick={this.handleLogin}>Login</button>
++++++++</form>);
},
handleLogin:+function()+{
++++console.log("EMail:+"+%2B+this.state.email);
++++console.log("Password:+"+%2B+this.state.password);
}|code-block|syntax|javascript|4628416|工作fiddle。|4628417|此外，请阅读文档，有一个完整的部分专门介绍表单处理：Forms|4628418|以前，您也可以使用React的双向数据绑定助手mixin来实现相同的功能，但现在为了设置值和更改处理程序(如上所述)，它已被弃用：|4628419|var+ExampleForm+=+React.createClass({
++mixins:+[React.addons.LinkedStateMixin],
++getInitialState:+function()+{
++++return+{email:+'',+password:+''};
++},
++handleLogin:+function()+{
++++console.log("EMail:+"+%2B+this.state.email);
++++console.log("Password:+"+%2B+this.state.password);
++},
++render:+function()+{
++++return+(
++++++<form>
++++++++<input+type="text"+valueLink={this.linkState('email')}+/>
++++++++<input+type="password"+valueLink={this.linkState('password')}+/>
++++++++<button+type="button"+onClick={this.handleLogin}>Login</button>
++++++</form>
++++);
++}
});|4628420|文档在这里：Two-way+Binding+Helpers。|4628421|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/kTu3a/|1|http://facebook.github.io/react/docs/forms.html|2|http://facebook.github.io/react/docs/two-way-binding-helpers.html^0|6|6|O|B|0|0|2|6|0|0|Q|5|1|0|0|0|6|N|2|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]|$9|19|A|1A|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|1B|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|1C|8|@]|D|@$9|1D|A|1E|1|1F]]|E|$]]|$1|M|3|N|5|6|7|1G|8|@]|D|@$9|1H|A|1I|1|1J]]|E|$]]|$1|O|3|P|5|6|7|1K|8|@]|D|@]|E|$]]|$1|Q|3|R|5|H|7|1L|8|@]|D|@]|E|$I|J]]|$1|S|3|T|5|6|7|1M|8|@]|D|@$9|1N|A|1O|1|1P]]|E|$]]|$1|U|3|-4|5|6|7|1Q|8|@]|D|@]|E|$]]]|V|$W|$5|X|Y|Z|E|$10|11]]|12|$5|X|Y|Z|E|$10|13]]|14|$5|X|Y|Z|E|$10|15]]]]

<p>Use the <code>change</code> events on the inputs to update the component's state and access it in <code>handleLogin</code>:</p>

<pre><code>handleEmailChange: function(e) {
   this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
   this.setState({password: e.target.value});
},
render : function() {
      return (
        &lt;form&gt;
          &lt;input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleEmailChange} /&gt;
          &lt;input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handlePasswordChange}/&gt;
          &lt;button type="button" onClick={this.handleLogin}&gt;Login&lt;/button&gt;
        &lt;/form&gt;);
},
handleLogin: function() {
    console.log("EMail: " + this.state.email);
    console.log("Password: " + this.state.password);
}
</code></pre>

<p>Working <a href="http://jsfiddle.net/kTu3a/" rel="noreferrer">fiddle</a>.</p>

<p>Also, read the docs, there is a whole section dedicated to form handling: <a href="http://facebook.github.io/react/docs/forms.html" rel="noreferrer">Forms</a> </p>

<p>Previously you could also use React's two-way databinding helper mixin to achieve the same thing, but now it's deprecated in favor of setting the value and change handler (as above):</p>

<pre><code>var ExampleForm = React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {email: '', password: ''};
  },
  handleLogin: function() {
    console.log("EMail: " + this.state.email);
    console.log("Password: " + this.state.password);
  },
  render: function() {
    return (
      &lt;form&gt;
        &lt;input type="text" valueLink={this.linkState('email')} /&gt;
        &lt;input type="password" valueLink={this.linkState('password')} /&gt;
        &lt;button type="button" onClick={this.handleLogin}&gt;Login&lt;/button&gt;
      &lt;/form&gt;
    );
  }
});
</code></pre>

<p>Documentation is here: <a href="http://facebook.github.io/react/docs/two-way-binding-helpers.html" rel="noreferrer">Two-way Binding Helpers</a>. </p>


blocks|key|4628469|text|另一种方法是使用ref属性并使用this.refs引用这些值。下面是一个简单的例子：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4628470|render:+function()+{
++++return+(<form+onSubmit={this.submitForm}>
++++++++<input+ref="theInput"+/>
++++</form>);
},
submitForm:+function(e)+{
++++e.preventDefault();
++++alert(React.findDOMNode(this.refs.theInput).value);
}|code-block|syntax|javascript|4628471|更多信息可在React文档中找到：https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute|4628472|由于How+do+I+use+radio+buttons+in+React?中描述的许多原因，这种方法并不总是最好的，但在一些简单的情况下，它确实提供了一种有用的替代方案。|4628473|entityMap|0|LINK|mutability|MUTABLE|url|https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute|1|https://stackoverflow.com/questions/29694078/how-do-i-use-radio-buttons-in-react^0|8|3|G|9|0|0|H|2B|0|0|2|10|1|0^^$0|@$1|2|3|4|5|6|7|Y|8|@$9|Z|A|10|B|C]|$9|11|A|12|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|13|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|14|8|@]|D|@$9|15|A|16|1|17]]|E|$]]|$1|M|3|N|5|6|7|18|8|@]|D|@$9|19|A|1A|1|1B]]|E|$]]|$1|O|3|-4|5|6|7|1C|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]|W|$5|R|S|T|E|$U|X]]]]

<p>An alternative approach is to use the <code>ref</code> attribute and reference the values with <code>this.refs</code>. Here is a simple example:</p>

<pre><code>render: function() {
    return (&lt;form onSubmit={this.submitForm}&gt;
        &lt;input ref="theInput" /&gt;
    &lt;/form&gt;);
},
submitForm: function(e) {
    e.preventDefault();
    alert(React.findDOMNode(this.refs.theInput).value);
}
</code></pre>

<p>More info can be found in the React docs:
<a href="https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute" rel="noreferrer">https://facebook.github.io/react/docs/more-about-refs.html#the-ref-string-attribute</a></p>

<p>For a lot of the reasons described in <a href="https://stackoverflow.com/questions/29694078/how-do-i-use-radio-buttons-in-react">How do I use radio buttons in React?</a> this approach isn't always the best, but it does present a useful alternative in some simple cases.</p>


blocks|key|122630|text|这可能会对Meteor+(1.3版)用户有所帮助：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|122631|render:+function()+{
++++return+(
++++++++<form+onSubmit={this.submitForm.bind(this)}>
++++++++++++<input+type="text"+ref="email"+placeholder="Email"+/>
++++++++++++<input+type="password"+ref="password"+placeholder="Password"+/>
++++++++++++<button+type="submit">Login</button>
++++++++</form>
++++);
},
submitForm:+function(e)+{
++++e.preventDefault();
++++console.log(+this.refs.email.value+);
++++console.log(+this.refs.password.value+);
}|code-block|syntax|javascript|122632|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This might help Meteor (v1.3) users:</p>

<pre><code>render: function() {
    return (
        &lt;form onSubmit={this.submitForm.bind(this)}&gt;
            &lt;input type="text" ref="email" placeholder="Email" /&gt;
            &lt;input type="password" ref="password" placeholder="Password" /&gt;
            &lt;button type="submit"&gt;Login&lt;/button&gt;
        &lt;/form&gt;
    );
},
submitForm: function(e) {
    e.preventDefault();
    console.log( this.refs.email.value );
    console.log( this.refs.password.value );
}
</code></pre>


blocks|key|4628534|text|我建议采取以下方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4628535|import+{Autobind}+from+'es-decorators';

export+class+Form+extends+Component+{

++++@Autobind
++++handleChange(e)+{
++++++++this.setState({[e.target.name]:+e.target.value});
++++}

++++@Autobind
++++add(e)+{
++++++++e.preventDefault();
++++++++this.collection.add(this.state);
++++++++this.refs.form.reset();
++++}

++++shouldComponentUpdate()+{
++++++++return+false;
++++}

++++render()+{
++++++++return+(
++++++++++++<form+onSubmit={this.add}+ref="form">
++++++++++++++++<input+type="text"+name="desination"+onChange={this.handleChange}/>
++++++++++++++++<input+type="date"+name="startDate"+onChange={this.handleChange}/>
++++++++++++++++<input+type="date"+name="endDate"+onChange={this.handleChange}/>
++++++++++++++++<textarea+name="description"+onChange={this.handleChange}/>
++++++++++++++++<button+type="submit">Add</button>
++++++++++++</form>
++++++++)
++++}

}|code-block|syntax|javascript|4628536|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I would suggest the following approach:</p>

<pre><code>import {Autobind} from 'es-decorators';

export class Form extends Component {

    @Autobind
    handleChange(e) {
        this.setState({[e.target.name]: e.target.value});
    }

    @Autobind
    add(e) {
        e.preventDefault();
        this.collection.add(this.state);
        this.refs.form.reset();
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return (
            &lt;form onSubmit={this.add} ref="form"&gt;
                &lt;input type="text" name="desination" onChange={this.handleChange}/&gt;
                &lt;input type="date" name="startDate" onChange={this.handleChange}/&gt;
                &lt;input type="date" name="endDate" onChange={this.handleChange}/&gt;
                &lt;textarea name="description" onChange={this.handleChange}/&gt;
                &lt;button type="submit"&gt;Add&lt;/button&gt;
            &lt;/form&gt;
        )
    }

}
</code></pre>


blocks|key|122686|text|一种简单的处理裁判的方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|122687|​|122688|class+UserInfo+extends+React.Component+{

++constructor(props)+{
++++super(props);
++++this.handleSubmit+=+this.handleSubmit.bind(this);
++}

++handleSubmit(e)+{
++++e.preventDefault();
++++
++++const+formData+=+{};
++++for+(const+field+in+this.refs)+{
++++++formData[field]+=+this.refs[field].value;
++++}
++++console.log('-->',+formData);
++}

++render()+{
++++return+(
++++++++<div>
++++++++++<form+onSubmit={this.handleSubmit}>
++++++++++++<input+ref="phone"+className="phone"+type='tel'+name="phone"/>
++++++++++++<input+ref="email"+className="email"+type='tel'+name="email"/>
++++++++++++<input+type="submit"+value="Submit"/>
++++++++++</form>
++++++++</div>
++++);
++}
}

export+default+UserInfo;|code-block|syntax|javascript|122689|122690|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|N|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p>An easy way to deal with refs: </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(e) {
    e.preventDefault();
    
    const formData = {};
    for (const field in this.refs) {
      formData[field] = this.refs[field].value;
    }
    console.log('--&gt;', formData);
  }

  render() {
    return (
        &lt;div&gt;
          &lt;form onSubmit={this.handleSubmit}&gt;
            &lt;input ref="phone" className="phone" type='tel' name="phone"/&gt;
            &lt;input ref="email" className="email" type='tel' name="email"/&gt;
            &lt;input type="submit" value="Submit"/&gt;
          &lt;/form&gt;
        &lt;/div&gt;
    );
  }
}

export default UserInfo;</code></pre>
</div>
</div>
</p>


blocks|key|4628603|text|为了改善用户体验，当用户单击submit按钮时，您可以尝试让表单首先显示一条发送消息。一旦我们收到来自服务器的响应，它就可以相应地更新消息。我们在React中通过链接状态来实现这一点。请参阅下面的codepen或代码片段：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4628604|下面的方法进行第一次状态更改：|4628605|handleSubmit(e)+{
++++e.preventDefault();
++++this.setState({+message:+'Sending...'+},+this.sendFormData);
}|code-block|syntax|javascript|4628606|一旦React在屏幕上显示上述发送消息，它就会调用将表单数据发送到服务器的方法:+this.sendFormData()。为简单起见，我添加了一个setTimeout来模拟这一点。|4628607|sendFormData()+{
++var+formData+=+{
++++++Title:+this.refs.Title.value,
++++++Author:+this.refs.Author.value,
++++++Genre:+this.refs.Genre.value,
++++++YearReleased:+this.refs.YearReleased.value};
++setTimeout(()+=>+{+
++++console.log(formData);
++++this.setState({+message:+'data+sent!'+});
++},+3000);
}|4628608|在React中，方法this.setState()呈现一个具有新属性的组件。因此，您还可以在表单组件的render()方法中添加一些逻辑，这些逻辑将根据我们从服务器获得的响应类型而有所不同。例如：|4628609|render()+{
++if+(this.state.responseType)+{
++++++var+classString+=+'alert+alert-'+%2B+this.state.type;
++++++var+status+=+<div+id="status"+className={classString}+ref="status">
+++++++++++++++++++++{this.state.message}
+++++++++++++++++++</div>;
++}
return+(+...|4628610|codepen|4628611|entityMap|0|LINK|mutability|MUTABLE|url|http://codepen.io/hom_bahrani/pen/pPpOGP?editors=0011|1^0|2Q|7|0|0|0|0|0|0|0|0|0|7|1|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@$A|14|B|15|1|16]]|C|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|C|$]]|$1|F|3|G|5|H|7|18|8|@]|9|@]|C|$I|J]]|$1|K|3|L|5|6|7|19|8|@]|9|@]|C|$]]|$1|M|3|N|5|H|7|1A|8|@]|9|@]|C|$I|J]]|$1|O|3|P|5|6|7|1B|8|@]|9|@]|C|$]]|$1|Q|3|R|5|H|7|1C|8|@]|9|@]|C|$I|J]]|$1|S|3|T|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|U|3|-4|5|6|7|1H|8|@]|9|@]|C|$]]]|V|$W|$5|X|Y|Z|C|$10|11]]|12|$5|X|Y|Z|C|$10|11]]]]

<p>To improve the user experience; when the user clicks on the submit button, you can try to get the form to first show a sending message. Once we've received a response from the server, it can update the message accordingly. We achieve this in React by chaining statuses. See <a href="http://codepen.io/hom_bahrani/pen/pPpOGP?editors=0011" rel="nofollow noreferrer">codepen</a> or snippets below:</p>

<p>The following method makes the first state change:</p>

<pre><code>handleSubmit(e) {
    e.preventDefault();
    this.setState({ message: 'Sending...' }, this.sendFormData);
}
</code></pre>

<p>As soon as React shows the above Sending message on screen, it will call the method that will send the form data to the server: this.sendFormData(). For simplicity I've added a setTimeout to mimic this.</p>

<pre><code>sendFormData() {
  var formData = {
      Title: this.refs.Title.value,
      Author: this.refs.Author.value,
      Genre: this.refs.Genre.value,
      YearReleased: this.refs.YearReleased.value};
  setTimeout(() =&gt; { 
    console.log(formData);
    this.setState({ message: 'data sent!' });
  }, 3000);
}
</code></pre>

<p>In React, the method this.setState() renders a component with new properties. So you can also add some logic in render() method of the form component that will behave differently depending on the type of response we get from the server. For instance:</p>

<pre><code>render() {
  if (this.state.responseType) {
      var classString = 'alert alert-' + this.state.type;
      var status = &lt;div id="status" className={classString} ref="status"&gt;
                     {this.state.message}
                   &lt;/div&gt;;
  }
return ( ...
</code></pre>

<p><a href="http://codepen.io/hom_bahrani/pen/pPpOGP?editors=0011" rel="nofollow noreferrer">codepen</a></p>


blocks|key|4628629|text|此外，这也可以使用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4628630|handleChange:+function(state,e)+{
++this.setState({[state]:+e.target.value});
},
render+:+function()+{
++return+(
++++<form>
++++++<input+type="text"+name="email"+placeholder="Email"+value={this.state.email}+onChange={this.handleChange.bind(this,+'email')}+/>
++++++<input+type="password"+name="password"+placeholder="Password"+value={this.state.password}+onChange={this.handleChange.bind(this,+'password')}/>
++++++<button+type="button"+onClick={this.handleLogin}>Login</button>
++++</form>
++);
},
handleLogin:+function()+{
++console.log("EMail:+",+this.state.email);
++console.log("Password:+",+this.state.password);
}|code-block|syntax|javascript|4628631|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Also, this can be used too. </p>

<pre><code>handleChange: function(state,e) {
  this.setState({[state]: e.target.value});
},
render : function() {
  return (
    &lt;form&gt;
      &lt;input type="text" name="email" placeholder="Email" value={this.state.email} onChange={this.handleChange.bind(this, 'email')} /&gt;
      &lt;input type="password" name="password" placeholder="Password" value={this.state.password} onChange={this.handleChange.bind(this, 'password')}/&gt;
      &lt;button type="button" onClick={this.handleLogin}&gt;Login&lt;/button&gt;
    &lt;/form&gt;
  );
},
handleLogin: function() {
  console.log("EMail: ", this.state.email);
  console.log("Password: ", this.state.password);
}
</code></pre>


blocks|key|122751|text|如果你在你的项目中使用Redux，你可以考虑使用这个更高级的组件https://github.com/erikras/redux-form。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|122752|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/erikras/redux-form^0|W|11|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>If you are using Redux in your project you can consider using this higher order component <a href="https://github.com/erikras/redux-form" rel="nofollow noreferrer">https://github.com/erikras/redux-form</a>.</p>


blocks|key|122783|text|在javascript中的许多事件中，我们都有event，它给出了一个对象，包括发生了什么事件，值是什么，等等。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|122784|这也是我们在ReactJs中使用的表单...|122785|因此在您的代码中，您将状态设置为新值...如下所示：|122786|class+UserInfo+extends+React.Component+{

++constructor(props)+{
++++super(props);
++++this.handleLogin+=+this.handleLogin.bind(this);
++}

++handleLogin(e)+{
++++e.preventDefault();
++++for+(const+field+in+this.refs)+{
++++++this.setState({this.refs[field]:+this.refs[field].value});
++++}
++}

++render()+{
++++return+(
++++++++<div>
++++++++++<form+onSubmit={this.handleLogin}>
++++++++++++<input+ref="email"+type="text"+name="email"+placeholder="Email"+/>
++++++++++++<input+ref="password"+type="password"+name="password"+placeholder="Password"+/>
++++++++++++<button+type="button">Login</button>
++++++++++</form>
++++++++</div>
++++);
++}
}

export+default+UserInfo;|code-block|syntax|javascript|122787|这也是React+v.16中的表单示例，仅供将来创建表单时参考：|122788|class+NameForm+extends+React.Component+{
++constructor(props)+{
++++super(props);
++++this.state+=+{value:+''};

++++this.handleChange+=+this.handleChange.bind(this);
++++this.handleSubmit+=+this.handleSubmit.bind(this);
++}

++handleChange(event)+{
++++this.setState({value:+event.target.value});
++}

++handleSubmit(event)+{
++++alert('A+name+was+submitted:+'+%2B+this.state.value);
++++event.preventDefault();
++}

++render()+{
++++return+(
++++++<form+onSubmit={this.handleSubmit}>
++++++++<label>
++++++++++Name:
++++++++++<input+type="text"+value={this.state.value}+onChange={this.handleChange}+/>
++++++++</label>
++++++++<input+type="submit"+value="Submit"+/>
++++++</form>
++++);
++}
}|122789|entityMap^0|N|5|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|Z|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|11|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|12|8|@]|D|@]|E|$]]]|T|$]]

<p>In many events in javascript, we have <code>event</code> which give an object including what event happened and what are the values, etc...</p>

<p>That's what we use with forms in ReactJs as well...</p>

<p>So in your code you set the state to the new value... something like this:</p>

<pre><code>class UserInfo extends React.Component {

  constructor(props) {
    super(props);
    this.handleLogin = this.handleLogin.bind(this);
  }

  handleLogin(e) {
    e.preventDefault();
    for (const field in this.refs) {
      this.setState({this.refs[field]: this.refs[field].value});
    }
  }

  render() {
    return (
        &lt;div&gt;
          &lt;form onSubmit={this.handleLogin}&gt;
            &lt;input ref="email" type="text" name="email" placeholder="Email" /&gt;
            &lt;input ref="password" type="password" name="password" placeholder="Password" /&gt;
            &lt;button type="button"&gt;Login&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
    );
  }
}

export default UserInfo;
</code></pre>

<p>Also this is the form example in React v.16, just as reference for the form you creating in the future:</p>

<pre><code>class NameForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: ''};

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({value: event.target.value});
  }

  handleSubmit(event) {
    alert('A name was submitted: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      &lt;form onSubmit={this.handleSubmit}&gt;
        &lt;label&gt;
          Name:
          &lt;input type="text" value={this.state.value} onChange={this.handleChange} /&gt;
        &lt;/label&gt;
        &lt;input type="submit" value="Submit" /&gt;
      &lt;/form&gt;
    );
  }
}
</code></pre>


blocks|key|122801|text|您可以将按钮上的onClick事件处理程序切换为窗体上的onSubmit处理程序：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|122802|render+:+function()+{
++++++return+(
++++++++<form+onSubmit={this.handleLogin}>
++++++++++<input+type="text"+name="email"+placeholder="Email"+/>
++++++++++<input+type="password"+name="password"+placeholder="Password"+/>
++++++++++<button+type="submit">Login</button>
++++++++</form>
++++++);
++++},|code-block|syntax|javascript|122803|然后，您可以使用FormData解析表单(如果需要，还可以从其条目构造一个JSON对象)。|122804|handleLogin:+function(e)+{
+++const+formData+=+new+FormData(e.target)
+++const+user+=+{}

+++e.preventDefault()

+++for+(let+entry+of+formData.entries())+{
+++++++user[entry[0]]+=+entry[1]
+++}

+++//+Do+what+you+will+with+the+user+object+here
}|122805|entityMap^0|8|7|S|8|0|0|8|8|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|P|$]]

<p>You could switch the <code>onClick</code> event handler on the button to an <code>onSubmit</code> handler on the form:</p>

<pre><code>render : function() {
      return (
        &lt;form onSubmit={this.handleLogin}&gt;
          &lt;input type="text" name="email" placeholder="Email" /&gt;
          &lt;input type="password" name="password" placeholder="Password" /&gt;
          &lt;button type="submit"&gt;Login&lt;/button&gt;
        &lt;/form&gt;
      );
    },
</code></pre>

<p>Then you can make use of <code>FormData</code> to parse the form (and construct a JSON object from its entries if you want).</p>

<pre><code>handleLogin: function(e) {
   const formData = new FormData(e.target)
   const user = {}

   e.preventDefault()

   for (let entry of formData.entries()) {
       user[entry[0]] = entry[1]
   }

   // Do what you will with the user object here
}
</code></pre>


blocks|key|122810|text|+onChange(event){
+++++console.log(event.target.value);
++}
++handleSubmit(event){+
++++event.preventDefault();
++++const+formData+=+{};
++++++for+(const+data+in+this.refs)+{
++++++++formData[data]+=+this.refs[data].value;
++++++}
++++console.log(formData);
++}



+<form+onSubmit={this.handleSubmit.bind(this)}>
++<input+type="text"+ref="username"+onChange={this.onChange}+className="form-control"/>
++<input+type="text"+ref="password"+onChange={this.onChange}+className="form-control"/>
++<button+type="submit"+className="btn-danger+btn-sm">Search</button>
+</form>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|122811|Output+image+attached+here|unstyled|offset|length|122812|entityMap|0|LINK|mutability|MUTABLE|url|https://i.stack.imgur.com/BsvRX.png^0|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|R|8|@]|9|@$G|S|H|T|1|U]]|A|$]]|$1|I|3|-4|5|F|7|V|8|@]|9|@]|A|$]]]|J|$K|$5|L|M|N|A|$O|P]]]]

<pre><code> onChange(event){
     console.log(event.target.value);
  }
  handleSubmit(event){ 
    event.preventDefault();
    const formData = {};
      for (const data in this.refs) {
        formData[data] = this.refs[data].value;
      }
    console.log(formData);
  }



 &lt;form onSubmit={this.handleSubmit.bind(this)}&gt;
  &lt;input type="text" ref="username" onChange={this.onChange} className="form-control"/&gt;
  &lt;input type="text" ref="password" onChange={this.onChange} className="form-control"/&gt;
  &lt;button type="submit" className="btn-danger btn-sm"&gt;Search&lt;/button&gt;
 &lt;/form&gt;
</code></pre>

<p><a href="https://i.stack.imgur.com/BsvRX.png" rel="nofollow noreferrer">Output image attached here</a></p>


blocks|key|4628719|text|如下所示给出你的输入|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4628720|<input+type="text"+name="email"+placeholder="Email"+ref="email"+/>
<input+type="password"+name="password"+placeholder="Password"+ref="password"+/>|code-block|syntax|javascript|4628721|然后你就可以像soo一样在你的handleLogin中访问它|4628722|handleLogin:+function(e)+{
+++e.preventDefault();
++++console.log(this.refs.email.value)
++++console.log(this.refs.password.value)
}|4628723|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Give your inputs ref like this</p>

<pre><code>&lt;input type="text" name="email" placeholder="Email" ref="email" /&gt;
&lt;input type="password" name="password" placeholder="Password" ref="password" /&gt;
</code></pre>

<p>then you can access it in your handleLogin like soo</p>

<pre><code>handleLogin: function(e) {
   e.preventDefault();
    console.log(this.refs.email.value)
    console.log(this.refs.password.value)
}
</code></pre>


blocks|key|4628730|text|如果您所有的输入/文本区域都有一个名称，那么您可以从event.target中过滤所有内容：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4628731|onSubmit(event){
++const+fields+=+Array.prototype.slice.call(event.target)
++++++.filter(el+=>+el.name)
++++++.reduce((form,+el)+=>+({
++++++++...form,
++++++++[el.name]:+el.value,
++++++}),+{})
}|code-block|syntax|javascript|4628732|没有onChange方法、值、defaultValue的完全不受控制的表单...|4628733|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>If all your inputs / textarea have a name, then you can filter all from event.target:</p>

<pre><code>onSubmit(event){
  const fields = Array.prototype.slice.call(event.target)
      .filter(el =&gt; el.name)
      .reduce((form, el) =&gt; ({
        ...form,
        [el.name]: el.value,
      }), {})
}
</code></pre>

<p>Totally uncontrolled form  without onChange methods, value, defaultValue...</p>


blocks|key|122825|text|更清晰的es6+destructing示例|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|122826|class+Form+extends+Component+{
++++constructor(props)+{
++++++++super(props);
++++++++this.state+=+{
++++++++++++login:+null,
++++++++++++password:+null,
++++++++++++email:+null
++++++++}
++++}

++++onChange(e)+{
++++++++this.setState({
++++++++++++[e.target.name]:+e.target.value
++++++++})
++++}

++++onSubmit(e)+{
++++++++e.preventDefault();
++++++++let+login+=+this.state.login;
++++++++let+password+=+this.state.password;
++++++++//+etc
++++}

++++render()+{
++++++++return+(
++++++++++++<form+onSubmit={this.onSubmit.bind(this)}>
++++++++++++++++<input+type="text"+name="login"+onChange={this.onChange.bind(this)}+/>
++++++++++++++++<input+type="password"+name="password"+onChange={this.onChange.bind(this)}+/>
++++++++++++++++<input+type="email"+name="email"+onChange={this.onChange.bind(this)}+/>
++++++++++++++++<button+type="submit">Sign+Up</button>
++++++++++++</form>
++++++++);
++++}
}|code-block|syntax|javascript|122827|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Computed_object_property_names_and_destructuring^0|4|F|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>More clear example with <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Computed_object_property_names_and_destructuring" rel="noreferrer">es6 destructing</a></p>

<pre><code>class Form extends Component {
    constructor(props) {
        super(props);
        this.state = {
            login: null,
            password: null,
            email: null
        }
    }

    onChange(e) {
        this.setState({
            [e.target.name]: e.target.value
        })
    }

    onSubmit(e) {
        e.preventDefault();
        let login = this.state.login;
        let password = this.state.password;
        // etc
    }

    render() {
        return (
            &lt;form onSubmit={this.onSubmit.bind(this)}&gt;
                &lt;input type="text" name="login" onChange={this.onChange.bind(this)} /&gt;
                &lt;input type="password" name="password" onChange={this.onChange.bind(this)} /&gt;
                &lt;input type="email" name="email" onChange={this.onChange.bind(this)} /&gt;
                &lt;button type="submit"&gt;Sign Up&lt;/button&gt;
            &lt;/form&gt;
        );
    }
}
</code></pre>


blocks|key|122832|text|我像这样使用React组件状态：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|122833|<input+type="text"+name='value'+value={this.state.value}+onChange={(e)+=>+this.handleChange(e)}+/>

handleChange(e){
+++this.setState({[e.target.name]:+e.target.value})
}`|code-block|syntax|javascript|122834|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I use like this using React Component state:</p>

<pre><code>&lt;input type="text" name='value' value={this.state.value} onChange={(e) =&gt; this.handleChange(e)} /&gt;

handleChange(e){
   this.setState({[e.target.name]: e.target.value})
}`
</code></pre>


blocks|key|4628859|text|补充Michael+Schock的回答：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4628860|class+MyForm+extends+React.Component+{
++constructor()+{
++++super();
++++this.handleSubmit+=+this.handleSubmit.bind(this);
++}

++handleSubmit(event)+{
++++event.preventDefault();
++++const+data+=+new+FormData(event.target);

++++console.log(data.get('email'));+//+reference+by+form+input's+`name`+tag

++++fetch('/api/form-submit-url',+{
++++++method:+'POST',
++++++body:+data,
++++});
++}

++render()+{
++++return+(
++++++<form+onSubmit={this.handleSubmit}>
++++++++<label+htmlFor="username">Enter+username</label>
++++++++<input+id="username"+name="username"+type="text"+/>

++++++++<label+htmlFor="email">Enter+your+email</label>
++++++++<input+id="email"+name="email"+type="email"+/>

++++++++<label+htmlFor="birthdate">Enter+your+birth+date</label>
++++++++<input+id="birthdate"+name="birthdate"+type="text"+/>

++++++++<button>Send+data!</button>
++++++</form>
++++);
++}
}|code-block|syntax|javascript|4628861|See+this+Medium+article:+How+to+Handle+Forms+with+Just+React|offset|length|4628862|此方法仅在按下Submit按钮时获取表单数据。更干净的IMO！|4628863|entityMap|0|LINK|mutability|MUTABLE|url|https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f^0|0|0|0|1O|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|W|8|@]|9|@$I|X|J|Y|1|Z]]|A|$]]|$1|K|3|L|5|6|7|10|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Adding on to Michael Schock's answer:</p>

<pre><code>class MyForm extends React.Component {
  constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    console.log(data.get('email')); // reference by form input's `name` tag

    fetch('/api/form-submit-url', {
      method: 'POST',
      body: data,
    });
  }

  render() {
    return (
      &lt;form onSubmit={this.handleSubmit}&gt;
        &lt;label htmlFor="username"&gt;Enter username&lt;/label&gt;
        &lt;input id="username" name="username" type="text" /&gt;

        &lt;label htmlFor="email"&gt;Enter your email&lt;/label&gt;
        &lt;input id="email" name="email" type="email" /&gt;

        &lt;label htmlFor="birthdate"&gt;Enter your birth date&lt;/label&gt;
        &lt;input id="birthdate" name="birthdate" type="text" /&gt;

        &lt;button&gt;Send data!&lt;/button&gt;
      &lt;/form&gt;
    );
  }
}
</code></pre>

<p><a href="https://medium.com/@everdimension/how-to-handle-forms-with-just-react-ac066c48bd4f" rel="noreferrer">See this Medium article: How to Handle Forms with Just React</a></p>

<p>This method gets form data only when Submit button is pressed. Much cleaner IMO!</p>


blocks|key|122909|text|对于那些不想使用ref并使用OnChange事件重置状态的人，您可以只使用简单的OnSubmit句柄并遍历FormData对象。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|122910|注意，你不能直接访问formData.entries()，因为它是一个可迭代的，你必须遍历它。|122911|此示例使用React+Hooks：|122912|const+LoginPage+=+()+=>+{
++const+handleSubmit+=+(event)+=>+{
++++const+formData+=+new+FormData(event.currentTarget);
++++event.preventDefault();
++++for+(let+[key,+value]+of+formData.entries())+{
++++++console.log(key,+value);
++++}
++};

++return+(
++++<div>
++++++<form+onSubmit={handleSubmit}>
++++++++<input+type="text"+name="username"+placeholder="Email"+/>
++++++++<input+type="password"+name="password"+placeholder="Password"+/>
++++++++<button+type="submit">Login</button>
++++++</form>
++++</div>
++);
};|code-block|syntax|javascript|122913|如果你使用的是TypeScript：|122914|export+const+LoginPage:+React.FC<{}>+=+()+=>+{
++const+handleSubmit:+React.FormEventHandler<HTMLFormElement>+=+(event)+=>+{
++++const+formData+=+new+FormData(event.currentTarget);
++++event.preventDefault();
++++for+(let+[key,+value]+of+formData.entries())+{
++++++console.log(key,+value);
++++}
++};

++return+(
++++<div>
++++++<form+onSubmit={handleSubmit}>
++++++++<input+type="text"+name="username"+placeholder="Email"+/>
++++++++<input+type="password"+name="password"+placeholder="Password"+/>
++++++++<button+type="submit">Login</button>
++++++</form>
++++</div>
++);
};|122915|entityMap^0|E|8|1H|8|0|A|I|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]|$9|X|A|Y|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|Z|8|@$9|10|A|11|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|12|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|13|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|6|7|14|8|@]|D|@]|E|$]]|$1|Q|3|R|5|L|7|15|8|@]|D|@]|E|$M|N]]|$1|S|3|-4|5|6|7|16|8|@]|D|@]|E|$]]]|T|$]]

<p>For those who don't want to use ref and reset the state with <code>OnChange</code> event, you can just use simple OnSubmit handle and loop through the <code>FormData</code> object.</p>
<p>Note that you cannot access <code>formData.entries()</code> directly since it is an iterable, you have to loop over it.</p>
<p>This example is using React Hooks:</p>
<pre><code>const LoginPage = () =&gt; {
  const handleSubmit = (event) =&gt; {
    const formData = new FormData(event.currentTarget);
    event.preventDefault();
    for (let [key, value] of formData.entries()) {
      console.log(key, value);
    }
  };

  return (
    &lt;div&gt;
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;input type=&quot;text&quot; name=&quot;username&quot; placeholder=&quot;Email&quot; /&gt;
        &lt;input type=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
        &lt;button type=&quot;submit&quot;&gt;Login&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
};
</code></pre>
<p>And if you're using TypeScript:</p>
<pre><code>export const LoginPage: React.FC&lt;{}&gt; = () =&gt; {
  const handleSubmit: React.FormEventHandler&lt;HTMLFormElement&gt; = (event) =&gt; {
    const formData = new FormData(event.currentTarget);
    event.preventDefault();
    for (let [key, value] of formData.entries()) {
      console.log(key, value);
    }
  };

  return (
    &lt;div&gt;
      &lt;form onSubmit={handleSubmit}&gt;
        &lt;input type=&quot;text&quot; name=&quot;username&quot; placeholder=&quot;Email&quot; /&gt;
        &lt;input type=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; /&gt;
        &lt;button type=&quot;submit&quot;&gt;Login&lt;/button&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  );
};
</code></pre>


blocks|key|4628943|text|我想这也是你需要的答案。此外，我在这里添加了所需的属性。每个输入组件的onChange属性都是函数。你需要在那里添加你自己的逻辑。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4628944|handleEmailChange:+function(e)+{
++++this.setState({email:+e.target.value});
},
handlePasswordChange:+function(e)+{
+++this.setState({password:+e.target.value});
},
formSubmit+:+async+function(e)+{
++++e.preventDefault();
++++//+Form+submit+Logic
++},
render+:+function()+{
++++++return+(
++++++++<form+onSubmit={(e)+=>+this.formSubmit(e)}>
++++++++++<input+type="text"+name="email"+placeholder="Email"+value={this.state.email}+onChange={this.handleEmailChange}+required+/>
++++++++++<input+type="password"+name="password"+placeholder="Password"+value={this.state.password}+onChange={this.handlePasswordChange}+required+/>
++++++++++<button+type="button">Login</button>
++++++++</form>);
},
handleLogin:+function()+{
++++//Login+Function
}|code-block|syntax|javascript|4628945|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I think this is also the answer that you need. In addition, Here I add the required attributes. onChange attributes of Each input components are functions. You need to add your own logic there.</p>
<pre><code>handleEmailChange: function(e) {
    this.setState({email: e.target.value});
},
handlePasswordChange: function(e) {
   this.setState({password: e.target.value});
},
formSubmit : async function(e) {
    e.preventDefault();
    // Form submit Logic
  },
render : function() {
      return (
        &lt;form onSubmit={(e) =&gt; this.formSubmit(e)}&gt;
          &lt;input type=&quot;text&quot; name=&quot;email&quot; placeholder=&quot;Email&quot; value={this.state.email} onChange={this.handleEmailChange} required /&gt;
          &lt;input type=&quot;password&quot; name=&quot;password&quot; placeholder=&quot;Password&quot; value={this.state.password} onChange={this.handlePasswordChange} required /&gt;
          &lt;button type=&quot;button&quot;&gt;Login&lt;/button&gt;
        &lt;/form&gt;);
},
handleLogin: function() {
    //Login Function
}
</code></pre>


blocks|key|4628978|text|不需要使用refs，您可以使用event进行访问|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4628979|function+handleSubmit(e)+{
++++e.preventDefault()
++++const+{username,+password+}+=+e.target.elements
++++console.log({username:+username.value,+password:+password.value+})
}

<form+onSubmit={handleSubmit}>
+++<input+type="text"+id="username"/>
+++<input+type="text"+id="password"/>
+++<input+type="submit"+value="Login"+/>
</form>|code-block|syntax|javascript|4628980|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>No need to use refs, you can access using event</p>
<pre><code>function handleSubmit(e) {
    e.preventDefault()
    const {username, password } = e.target.elements
    console.log({username: username.value, password: password.value })
}

&lt;form onSubmit={handleSubmit}&gt;
   &lt;input type=&quot;text&quot; id=&quot;username&quot;/&gt;
   &lt;input type=&quot;text&quot; id=&quot;password&quot;/&gt;
   &lt;input type=&quot;submit&quot; value=&quot;Login&quot; /&gt;
&lt;/form&gt;
</code></pre>


blocks|key|4629037|text|下面是从表单中获取数据的最短方法，也是避免id和ref的最佳方法，只需使用FormData|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4629038|import+React,+{+Component+}+from+'react'

class+FormComponent+extends+Component+{
++formSubmit+=+(event)+=>+{
++++event.preventDefault()
++++var+data+=+new+FormData(event.target)
++++let+formObject+=+Object.fromEntries(data.entries())
++++console.log(formObject)
++}
++render()+{
++++return+(
++++++<div>
++++++++<form+onSubmit={this.formSubmit}>
++++++++++<label>Name</label>
++++++++++<input+name="name"+placeholder="name"+/>
++++++++++<label>Email</label>
++++++++++<input+type="email"+name="email"+/>
++++++++++<input+type="submit"+/>
++++++++</form>
++++++</div>
++++)
++}
}
export+default+FormComponent|code-block|syntax|javascript|4629039|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>Here is shortest way to get data from form and the best way to avoid id and ref just by using FormData</p>
<pre><code>import React, { Component } from 'react'

class FormComponent extends Component {
  formSubmit = (event) =&gt; {
    event.preventDefault()
    var data = new FormData(event.target)
    let formObject = Object.fromEntries(data.entries())
    console.log(formObject)
  }
  render() {
    return (
      &lt;div&gt;
        &lt;form onSubmit={this.formSubmit}&gt;
          &lt;label&gt;Name&lt;/label&gt;
          &lt;input name=&quot;name&quot; placeholder=&quot;name&quot; /&gt;
          &lt;label&gt;Email&lt;/label&gt;
          &lt;input type=&quot;email&quot; name=&quot;email&quot; /&gt;
          &lt;input type=&quot;submit&quot; /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    )
  }
}
export default FormComponent
</code></pre>


<p>I have a simple form in my <code>render</code> function, like so:</p>

<pre><code>render : function() {
      return (
        &lt;form&gt;
          &lt;input type="text" name="email" placeholder="Email" /&gt;
          &lt;input type="password" name="password" placeholder="Password" /&gt;
          &lt;button type="button" onClick={this.handleLogin}&gt;Login&lt;/button&gt;
        &lt;/form&gt;
      );
    },
handleLogin: function() {
   //How to access email and password here ?
}
</code></pre>

<p>What should I write in my <code>handleLogin: function() { ... }</code> to access <code>Email</code> and <code>Password</code> fields?</p>


Get form data in ReactJS

TypeScript

服务器

JSON

我的render函数中有一个简单的表单，如下所示：render : function() {      return (        <form>          <input type="text" name="email" placeholder="Email" />          <input type=...

问获取ReactJS格式的表单数据
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取ReactJS格式的表单数据EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问获取ReactJS格式的表单数据
EN