React登录页面

React login page

本文关键字：登录 React      更新时间：2023-09-26

我正试图在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"}
相关文章：