React登录页面
React login page
我正试图在react中编写登录页面,但setState的异步特性使这变得相当困难。
提交后,打印输出状态将旧值设置为初始状态,而不是使用表单值更新状态。
我知道setState是异步的,并且不能保证状态会被更新,那么我在这里有什么选择呢?如何确保提交将获得新值?
还有比这更好的方法吗?
下面的代码。
var Login = React.createClass({
getInitialState: function() {
return {
name: '',
password: ''
}
},
handleSubmit: function(e) {
e.preventDefault();
var msg = {
name: this.state.name,
password: this.state.password
}
// name and password are not updated
console.log(msg)
},
handleChange: function(value, e) {
this.setState({ value: e.target.value })
},
render: function() {
return (
<div>
<form onSubmit={this.handleSubmit}>
<Form horizontal>
<FormGroup controlId="formHorizontalName">
<Col componentClass={ControlLabel} sm={1}>
Name
</Col>
<Col sm={3}>
<FormControl type="text" placeholder="Name" value={this.state.name} onChange={this.handleChange.bind(this, 'name')}/>
</Col>
</FormGroup>
<FormGroup controlId="formHorizontalPassword">
<Col componentClass={ControlLabel} sm={1}>
Password
</Col>
<Col sm={3}>
<FormControl type="password" placeholder="Password" value={this.state.password} onChange={this.handleChange.bind(this, 'password')}/>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={1} sm={3}>
<Checkbox>Remember me</Checkbox>
</Col>
</FormGroup>
<FormGroup>
<Col smOffset={1} sm={3}>
<Button type="submit">
Sign in
</Button>
</Col>
</FormGroup>
</Form>
</form>
</div>
);
}
});
module.exports = Login;
尝试将handleChange
函数替换为:
handleChange: function(value, e) {
this.setState({ [value]: e.target.value })
},
请注意,我添加[
]
以指定我要更新value
变量(name
或password
)的值,而不是字符串value
(您的代码)
示例:
var value = "red"
var obj1 = {value: "foo"} // {value: "foo"}
var obj2 = {color: value} // {color: "red"}
var obj3 = {[value]: "foo"} // {red: "foo"}
相关文章:
- React重新渲染但未显示正确的组件
- 如何通过React Native中的组件共享登录状态
- 当登录状态为组件状态时,如何使用react路由器实现依赖登录的路径
- React 同级组件在按下按钮时进行通信(登录表单)
- 如何在 React 组件中使用 Facebook 开发者站点的 Facebook 登录按钮
- React & Redux :简单的异步登录
- React/Flux通过登录流处理权限敏感操作的方式
- 用户登录身份验证如何与React native一起工作
- 使用React Redux对登录用户进行post call
- 如何用api调用来构建React App的所有登录、注册和主页
- 查看是否已登录- React Router App ES6
- React路由器:获取一个登录成功的url,并传递一个令牌,然后重定向到主页
- 干净的方式来重新路由那些没有登录React的用户
- 在React Router上,如何在页面刷新时保持登录状态
- React-native如何在facebook登录和注销后刷新页面
- Flux+React.js登录/注册流
- React Native-将登录的Firebase用户重定向到Home Component
- 使用react和redux登录api请求
- React登录页面
- React Native + Firebase 登录错误:Undefind 不是对象(评估 'this.props.na