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"}