onChange功能console.log是一個字符短

Question

我想在我的表單中創建密碼確認功能。然而，在測試時，我的console.logs輸出值總是一個值短，我不知道爲什麼會發生這種情況。

class SignUp extends React.Component { 
    getInitialState() { 
     return { 
      initialPassword: "", 
      confirmPassword: "", 
      isMatchedPassword: true, 
      isEmailInUse: false, 
     } 
    } 


    checkAvailableEmail(event) { 
     console.log("checkAvailableEmail"); 
     console.log(event.target.value); 
    } 

    confirmPassword(event) { 
     console.log("confirmPassword"); 
     this.setState({ 
      confirmPassword: event.target.value 
     }) 

     if (this.state.confirmPassword !== this.state.initialPassword) { 
      console.log("Passwords DONT match"); 
      this.state.isMatchedPassword = false; 
     } else { 
      console.log("Passwords match"); 
      this.state.isMatchedPassword = true; 
     } 

     console.log("confirmPassword props"); 
     console.log(this.state); 

    } 

    setInitialPassword(event) { 
     console.log("setInitialPassword"); 
     this.setState({ 
      initialPassword: event.target.value 
     }); 
     console.log("setInitialPassword props"); 
     console.log(this.state); 

    } 

    render() { 
     let hidden = ""; 
     Log.debug('Signup component props'); 
     Log.debug(this.props); 

     return (
      <div> 
       <form method="POST" action="/signup"> 
        <ul> 
         <li><input id="firstName" name="first_name" placeholder="First name" type="text" required="required" /></li> 
         <li><input id="lastName" name="last_name" placeholder="Last name" type="text" required="required" /></li> 
         <li><input id="email" name="email" placeholder="Email" type="email" required="required" onBlur={ this.checkAvailableEmail }/></li> 
         <li><input id="password" name="password" placeholder="Password" type="password" required="required" onChange={ this.setInitialPassword}/></li> 
         <li><input id="confirmPassword" name="confirm_password" placeholder="Confirm Password" type="password" required="required" onChange={ this.confirmPassword } /></li> 
         <span id="confirmMessage" className={ hidden }>Password does not match</span> 
         <input type="submit" value="Sign up" /> 
         <input type="reset" value="Cancel" /> 
        </ul> 
       </form> 
      </div> 
     ); 
    } 
}; 

Answer 1

要記住的是setState is asynchronous這一點很重要：

setState()不會立即發生變異this.state但創建待狀態轉變。調用此方法後訪問this.state可能會返回現有值。

和

第二參數（可選）是將被執行一次setState完成並且部件被重新呈現的回調函數。

嘗試改變confirmPassword喜歡的東西：

confirmPassword(event) { 
    console.log("confirmPassword"); 
    this.setState({ 
     confirmPassword: event.target.value 
    }, this.checkMatchingPasswords); 

} 

checkMatchingPasswords() { 
    if (this.state.confirmPassword !== this.state.initialPassword) { 
     console.log("Passwords DONT match"); 
     this.state.isMatchedPassword = false; 
    } else { 
     console.log("Passwords match"); 
     this.state.isMatchedPassword = true; 
    } 

    console.log("confirmPassword props"); 
    console.log(this.state); 

} 

然而，內checkMatchingPasswords代碼也是不正確的：

NEVER發生變異this.state直接，如調用setState()之後可以更換你做的突變。對待this.state就好像它是不可變的。

由於state.isMatchedPassword取決於state.initialPassword和state.confirmedPassword的價值觀，我會徹底刪除它，把它變成一個功能：

confirmPassword(event) { 
    console.log("confirmPassword"); 
    this.setState({ 
     confirmPassword: event.target.value 
    }, this.checkMatchingPasswords); 

} 

checkMatchingPasswords() { 
    var { initialPassword, confirmedPassword } = this.state; 
    if (this.isMatchedPassword(initialPassword, confirmedPassword)) { 
     console.log("Passwords DONT match"); 
    } else { 
     console.log("Passwords match"); 
    } 
} 

isMatchedPassword(initial, confirmed) { 
    return initial === confirmed; 
} 

下面是這種技術的工作示例：https://jsbin.com/huxuri/edit?js,output