javascript - react 登录页面

Question

我正在尝试在 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;

Answer 1

尝试将 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"}