Question

我正在尝试在React中构建一个密码确认表单，但我不能让输入验证双向工作。重现：

输入密码。
输入匹配的确认密码。
编辑确认密码，使其不再匹配。
编辑密码字段以匹配确认密码。

最后一步不起作用，我认为我在handlePasswordInput中设置密码状态的方式有问题。 <{1}}方法中的this.state.password在调用此方法时不保留最新密码。

我创建了一个包含代码的bin：https://jsbin.com/sufupedayi/edit?js,output

任何可以指出我正确方向的React专家？

isConfirmedPassword

Answer 1

用这个替换你的handlePasswordInput。它发生的原因是，在状态下更新密码之前，您的handlePasswordInput被调用。当您输入确认密码字段时，这不会发生，因为密码已在状态中更新。

工作小提琴 - https://jsbin.com/cipuguxezi/1/edit?html,js,output

 handlePasswordInput(value) {
      this.setState({
         password: value
      });
      var self= this;
      window.setTimeout(function(){
        if (self.state.confirmPassword && self.state.confirmPassword.length) {
        self.refs.confirmPassword.validate(self.state.confirmPassword);
      }
    });

}

注意：JSBIN中存在一些错误，请确保

<div id="app"/>

出现在脚本标记上方。

Answer 2

我认为你让它变得比它需要的更复杂，所以你已经遇到了竞争条件的问题并且难以遵循代码。试试这个：

var SignIn = React.createClass({
    getInitialState() {
        return {
            password: null,
            valid: false
        }
    },

    checkRequired(value) {
        return !!value.trim();
    },

    checkPasswordsMatch(value) {
        var match = this.refs.password.getValue() === value;
        this.setState({
            valid: match,
            password: value
        });
        return match;
    },

    render() {
        return (
            <form autoComplete="off">
                <Input
                    ref="password"
                    name="password"
                    placeholder="Password"
                    errorMessage="Password is required"
                    validate={this.checkRequired}
                />
                <Input
                    name="confirmPassword"
                    placeholder="Confirm password"
                    errorMessage="Passwords do not match"
                    validate={this.checkPasswordsMatch}
                />
                <button type="submit">Submit</button>
            </form>
        )
    }
});

var Input = React.createClass({
    getInitialState() {
        return {
            hasChanged: false,
            valid: false
        }
    },
    handleChange(event) {
        if (this.props.validate) {
            this.setState({
                valid: this.props.validate(event.target.value)
            });
        }

        this.setState({
            hasChanged: true
        });
    },

    getValue() {
        //return this.refs.input.value; // For React 0.14+
        return this.refs.input.getDOMNode().value;
    },

    render() {
        return (
            <div>
                <input
                    ref="input"
                    name={this.props.name}
                    placeholder={this.props.placeholder}
                    onChange={this.handleChange}
                />
                {this.state.hasChanged && !this.state.valid && <InputError errorMessage={this.props.errorMessage} />}
            </div>
        )
    }
});

var InputError = React.createClass({
    render() {
        return (
            <div>{this.props.errorMessage}</div>
        )
    }
})

e.g。 https://jsbin.com/febagojayo/edit?js,output

比较表单组件值

2 个答案: