如何在React Js中设置匹配密码

Question

我需要一些帮助，如何在React js中匹配密码。我使用ant设计，第一个密码有效，但是对于一致密码，我声明不起作用，该怎么办

handlePasswordChange = event => {
  this.setState({
    password: event.target.value,
  });
};
handleConfirmPassword = event => {
  if (event.handleConfirmPassword !== event.handlePasswordChange) {
    message.error('error');
  }
};

这些很有趣，下面是蚂蚁设计

<FormItem {...styles.formItemLayout} label="Password">
  {getFieldDecorator('Password', {
    rules: [{ required: true, message: 'Password is Required!' }],
  })(
    <Input
      onChange={this.handlePasswordChange}
      name="password"
      type="password"
      value={password}
      style={styles.margin}
    />,
  )}
</FormItem>
<FormItem {...styles.formItemLayout} label="Confirm Password">
  {getFieldDecorator('Confirm Password', {
    rules: [{ required: true, message: 'Confirm your Password!' }],
  })(
    <Input
      name="password"
      type="password"
      style={styles.margin}
      onChange={this.handleConfirmPassword}
    />,
  )}
</FormItem>

Answer 1

尝试这个：

handleConfirmPassword = (event) => {
    if (event.target.value !== this.state.password) {
      message.error('error');
    }
}

您还可以将状态设置为：

state = {
    password: '',
    confirmPassword: ''
}

然后，您可以handleConfirmPassword在提交时检查和 上的匹配。

handleConfirmPassword = (event) => {
    if (event.target.value !== this.state.password) {
      message.error('error');
      this.setState({confirmPassword: event.target.value})
    }
}

然后，提交处理程序到表单：

handleSubmit = (event) => {
   if(this.state.password !== this.state.confirmPassword){
       message.error("The passwords doesn't match")
       return false; // The form won't submit
   }
   else return true; // The form will submit
}

Answer 2

假设您的密码和ConfirmPassword都处于状态。

this.state = {
    password: '',
    confirmPassword: ''
}

handleSubmit = () => {
    const { password, confirmPassword } = this.state;
    // perform all neccassary validations
    if (password !== confirmPassword) {
        alert("Passwords don't match");
    } else {
        // make API call
    }
}