Question

伙计们，我尝试仅在两个表单字段匹配时显示Button。我在逻辑上缺少什么？当前行为无法预测，并且会随机显示按钮。

请原谅newb问题，几乎没有前端经验（如果没有的话）

谢谢！

class ResetPassword extends React.Component {
    constructor(props) {
         super(props);
         this.state = {};
         this.handleNewPasswordChange = this.handleNewPasswordChange.bind(this);
         this.handleConfirmPasswordChange = this.handleConfirmPasswordChange.bind(this);
         this.handleSubmit = this.handleSubmit.bind(this);
         this.checkPasswordMatch = this.checkPasswordMatch.bind(this);
    }

    handleNewPasswordChange(event) {
        this.setState({newPassword: event.target.value});
        this.checkPasswordMatch();
    }

    handleConfirmPasswordChange(event) {
        this.setState({confirmPassword: event.target.value});
        this.checkPasswordMatch();
    }

    checkPasswordMatch() {
        if (this.state.newPassword === this.state.confirmPassword && this.state.newPassword.length > 4) {
            this.setState({passwordsMatch: true});
        } else {
            this.setState({passwordsMatch: false});
        }
    }

    render() {
        return (
            <Container>
                <h1>
                    Password Reset
                </h1>
                <div className="login-box">
                    <form onSubmit={this.handleSubmit}>
                        <label>
                            {strings.NewPassword} : &nbsp;
                            <input
                                id="newPassword"
                                name="newPassword"
                                type="password"
                                value={this.state.newPassword}
                                onChange={this.handleNewPasswordChange} />
                        </label>
                        <label>
                            {strings.ConfirmPassword} : &nbsp;
                            <input
                                id="confirmPassword"
                                name="confirmPassword"
                                type="password"
                                value={this.state.confirmPassword}
                                onChange={this.handleConfirmPasswordChange} />
                        </label>
                        { this.state.passwordsMatch ? <Button>{strings.ChangePassword}</Button> : null }
                    </form>
                </div>
            </Container>
        )
    }
}

Answer 1

从下面的功能中删除this.forceUpdate();。不需要，因为状态更改已触发重新渲染。

由于this.forceUpdate();的异步特性，

setState()甚至在实际更新状态之前就运行了，这反过来又导致了意外的行为。

checkPasswordMatch() {
        if (this.state.newPassword === this.state.confirmPassword && this.state.newPassword.length > 4) {
            this.setState({passwordsMatch: true});
        } else {
            this.setState({passwordsMatch: false});
        }
        this.forceUpdate();  //Remove this
    }

请参考 @Cmag 的答案，以进一步解决由setState()的异步行为引起的问题。

Answer 2

setState（）是一个异步方法。它接受一个回调函数，可用于做进一步的工作。

此外，我怀疑不断重新渲染会影响性能。在这种情况下，可以接受。

    handleNewPasswordChange(event) {
        this.setState({newPassword: event.target.value}, this.checkPasswordMatch);
    }

    handleConfirmPasswordChange(event) {
        this.setState({confirmPassword: event.target.value}, this.checkPasswordMatch);
    }

    checkPasswordMatch() {
        if (this.state.newPassword === this.state.confirmPassword && this.state.newPassword.length>4) {
            this.setState({passwordsMatch: true});
        } else {
            this.setState({passwordsMatch: false});
        }
    }
    ```

如果两个表单字段匹配，则对显示/隐藏按钮做出反应（密码确认）

2 个答案: