在ReactJS中获取表单数据

使用

change

handleLogin

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: " + this.state.email);    console.log("Password: " + this.state.password);}

工作提琴。

另外，阅读文档，有一整节专门讨论表单处理：表单

以前，您还可以使用React的双向数据绑定帮助器mixin来实现相同的功能，但是现在不建议使用它来设置值和更改处理程序（如上所述）：

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 (      <form>        <input type="text" valuelink={this.linkState('email')} />        <input type="password" valuelink={this.linkState('password')} />        <button type="button" onClick={this.handleLogin}>Login</button>      </form>    );  }});

文档在这里：双向绑定帮助器。