React登录页面

Question

我正在尝试编写登录页面，但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"}