使用
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> ); }});
