我的render函数中有一个简单的表单,如下所示:
render
render : function() { return ( <form> <input type="text" name="email" placeholder="Email" /> <input type="password" name="password" placeholder="Password" /> <button type="button" onClick={this.handleLogin}>Login</button> </form> ); }, handleLogin: function() { //How to access email and password here ? }
我应该在handleLogin: function() { ... }访问Email和Password字段中写些什么?
handleLogin: function() { ... }
Email
Password
使用change输入上的事件来更新组件的状态并在handleLogin以下位置访问它:
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> ); } });