在onChange事件期间，如何测试两个输入是否相同？

Question

I am trying to do an onChange event in react and test if two input fields are the same. This is for confirming a password. I want to show a little message below as they are typing if the passwords match or do not match. I tried to set that state and compare the state in the onChange event, but that did not work because I would get the state 1 step behind.

import React, { Component } from 'react';
import swal from 'sweetalert';

class UpdateUserPasswordTest extends Component {
  constructor(props) {
    super(props);

    this.state = {
      user: {
        currentPass: '',
        newPass: '',
        confirmNewPass: ''
      },
      match: false
    };

    this.updatePassword = this.updatePassword.bind(this);
    this.submitUserPassword = this.submitUserPassword.bind(this);
  }

  updatePassword(event) {
    event.preventDefault();

    this.setState({
      user: {
        ...this.state.user,
        [event.target.name]: event.target.value
      }
    });

    if (this.state.user.newPass === this.state.user.confirmNewPass) {
      this.setState({
        match: true
      });
    }
  }

  submitUserPassword() {
    this.props.onUpdatePassword(this.state.user);
  }

  render() {
    const { currentPass, newPass, confirmNewPass } = this.state.user;
    return (
      <div>
        <input
          type="password"
          name="currentPass"
          placeholder="Current Password"
          onChange={e => this.updatePassword(e)}
          value={currentPass}
        />
        <input
          type="password"
          name="newPass"
          placeholder="New Password"
          onChange={e => this.updatePassword(e)}
          value={newPass}
        />
        <input
          type="password"
          name="confirmNewPass"
          placeholder="Confirm New Password"
          onChange={e => this.updatePassword(e)}
          value={confirmNewPass}
        />
        <button onClick={this.submitUserPassword}>Update Pasword</button>
        {this.state.match === false ? (
          <div style={{ color: 'red' }}>Passwords Must Match</div>
        ) : (
          <div style={{ color: 'green' }}>Passwords Match!</div>
        )}
      </div>
    );
  }
}

export default UpdateUserPasswordTest;

Answer 1

Note: I tried to solve this problem as I understood your requirement. Note:check out following example, and let me know if it helps.

class UpdateUserPasswordTest extends Component {
    constructor(props) {
        super(props);

        this.state = 
        {
        currentPass:null,
        newPass:null,
        confirmNewPass:null,
        checkMessage: null
         };

    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit() {
    if(this.newPass == this.confirmNewPass) {
        this.setState({checkMessage: "Your password have changed."});
    } else {
        this.setState({checkMessage: "Some error occured during password change."});
    }
}

render() {
    return (
        <div>
            <div>
                Old Password:<input type="password" name="currentPass" placeholder="Current Password" onChange={this.handleCurrentPass} value={this.state.currentPass} />
                <br />
                New Password:<input type="password" name="newPass" placeholder="New Password" onChange={this.handleNewPass} value={this.state.newPass}/>
                <br />
                Rewrite New Password:<input type="password" name="confirmNewPass" placeholder="Confirm New Password" onChange={this.handleConfirmNewPass} value={this.state.confirmNewPass}/>
                <br />
                <button onClick={this.handleSubmit}>Update Pasword</button>
            </div>
            <div>{this.state.checkMessage}</div>
        </div>
    );
}

}

Answer 2

In my opinion the best way is

updatePassword(event) {
  event.preventDefault();
  const {name, value} = event.target

  const isNewPass = name === 'newPass' && value;

  this.setState(({currentPass}) => ({
    user: {
      ...this.state.user,
      [name]: value,
      match: isNewPass && value === currentPass
    }
  }));
}

Why best option.
First less alteration to your existing code.
Second you are resetting state once(you need keep updating state as less as possible).
And last you need to keep values from event, because if event updates while setState callback finishes execution, you will have another event. So better keep all required values assigned to variable.

Answer 3

I remember using ref sometime ago in an old react project and that seemed to do the trick. I think ref is react only, but not positive. Anyway,

Use ref and set it to a this value in the input like so:

<input type="text" ref={input => { this.firstInput = input }} onChange={e => this.comparePassword(e)} />

<input type="text" ref={input => { this.secondInput = input }} onChange={e => this.comparePassword(e)} />

In the onChange function I called this and compared the two doing this:

comparePassword(event){
 event.preventDefault(); //incase you want to prevent certain things from happening

 if(this.firstInput.value === this.secondInput.value){
  //Code for passwords being equal goes here
 }
}