javascript - 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() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.

和

The second (optional) parameter is a callback function that will be executed once setState is completed and the component is re-rendered.

尝试将 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 mutate this.state directly, as calling setState() afterwards may replace the mutation you made. Treat this.state as if it were immutable.

由于 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