reactjs - 比较表单组件值

Question

我正在尝试在 React 中构建一个密码确认表单，但我无法让输入验证以两种方式工作。重现:

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

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

我使用代码创建了一个垃圾箱:https://jsbin.com/sufupedayi/edit?js,output

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

SignIn = React.createClass({
    getInitialState() {
        return {
            password: null,
            confirmPassword: null
        }
    },
    handlePasswordInput(value) {
        if (!_.isEmpty(this.state.confirmPassword)) {
            this.refs.confirmPassword.validate(value);
        }

        this.setState({
            password: value
        })
    },
    handleConfirmPasswordInput(value) {
        this.setState({
            confirmPassword: value
        })
    },
    isConfirmedPassword(value) {
        return (value === this.state.password)

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

Input = React.createClass({
    getInitialState() {
        return {
            valid: false,
            value: null,
            errorMessage: this.props.errorMessage,
            errorVisible: false
        }
    },
    handleChange(event) {
        this.setState({
            value: event.target.value
        })

        if (this.props.validate) {
            this.validate(event.target.value);
        }

        if (this.props.onChange) {
            this.props.onChange(event.target.value);
        }

    },
    validate(value) {
        if (this.props.validate && this.props.validate(value)) {
            this.setState({
                valid: true,
                errorVisible: false
            });
        } else {
            this.setState({
                valid: false,
                errorVisible: true
            });
        }
    },
    render() {
        return (
            <div>
                <input
                    name={this.props.name}
                    placeholder={this.props.placeholder}
                    onChange={this.handleChange}
                />
                {!this.state.valid && <InputError errorMessage={this.state.errorMessage} visible={this.state.errorVisible} />}
            </div>
        )
    }
});

InputError = React.createClass({
    render() {
        var divStyle = {
            display: this.props.visible ? 'inline-block': 'none'
        }
        return (
            <div style={divStyle}>{this.props.errorMessage}</div>
        )
    }
})

React.render(<SignIn />, document.body);

Answer 1

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

工作 fiddle - 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存在一些bug，请确认

<div id="app"/>

出现在脚本标签上方。