Javascript 如何在on onChange事件期间测试react中的两个输入是否相同？

我试图在react中执行一个

onChange

事件，并测试两个输入字段是否相同。这是用来确认密码的。我想在他们输入密码时显示下面的一条消息，看密码是否匹配。我试图设置该状态并在onChange事件中比较该状态，但这不起作用，因为我会使状态落后1步

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;

import React，{Component}来自'React'；
从“sweetalert”进口污水；
类UpdateUserPasswordTest扩展组件{
建造师（道具）{
超级（道具）；
此.state={
用户：{
当前通行证：“”，
新通行证：“”，
confirmNewPass:'
},
匹配：false
};
this.updatePassword=this.updatePassword.bind（this）；
this.submitUserPassword=this.submitUserPassword.bind（this）；
}
updatePassword（事件）{
event.preventDefault（）；
这是我的国家({
用户：{
…此.state.user，
[event.target.name]：event.target.value
}
});
if（this.state.user.newPass==this.state.user.confirmNewPass）{
这是我的国家({
匹配：正确
});
}
}
submitUserPassword（）{
this.props.onUpdate密码（this.state.user）；
}
render（）{
const{currentPass，newPass，confirmNewPass}=this.state.user；
返回(
this.updatePassword（e）}
值={currentPass}
/>
this.updatePassword（e）}
值={newPass}
/>
this.updatePassword（e）}
值={confirmNewPass}
/>
更新Pasword
{this.state.match==false(
密码必须匹配
) : (
密码匹配！
)}
);
}
}
导出默认UpdateUserPasswordTest；

我记得不久前在一个旧的react项目中使用了ref，这似乎很管用。我认为裁判只是反应，但不是积极的。反正

使用ref并将其设置为输入中的

此

值，如下所示：

<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)} />

---

我记得不久前在一个旧的react项目中使用了ref，这似乎起到了作用。我认为裁判只是反应，但不是积极的。反正

使用ref并将其设置为输入中的

此

值，如下所示：

<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)} />

---

注：我试图解决这个问题，因为我了解你的要求。 注意：查看下面的示例，并让我知道它是否有帮助

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>
    );
}

类UpdateUserPasswordTest扩展组件{
建造师（道具）{
超级（道具）；
此.state=
{
currentPass:null，
newPass:null，
confirmNewPass:null，
检查消息：空
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（）{
if（this.newPass==this.confirmNewPass）{
this.setState（{checkMessage:“您的密码已更改。”}）；
}否则{
this.setState（{checkMessage:“密码更改期间发生了一些错误。”}）；
}
}
render（）{
返回(
旧密码：


新密码：


重写新密码：


更新Pasword
{this.state.checkMessage}
);
}

---

}

注意：我试图解决这个问题，因为我了解您的要求。 注意：查看下面的示例，并让我知道它是否有帮助

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>
    );
}

类UpdateUserPasswordTest扩展组件{
建造师（道具）{
超级（道具）；
此.state=
{
currentPass:null，
newPass:null，
confirmNewPass:null，
检查消息：空
};
this.handleSubmit=this.handleSubmit.bind（this）；
}
handleSubmit（）{
if（this.newPass==this.confirmNewPass）{
this.setState（{checkMessage:“您的密码已更改。”}）；
}否则{
this.setState（{checkMessage:“密码更改期间发生了一些错误。”}）；
}
}
render（）{
返回(
旧密码：


新密码：


重写新密码：


更新Pasword
{this.state.checkMessage}
);
}

---

}在我看来，最好的办法是

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
    }
  }));
}

为什么是最佳选择。
首先减少对现有代码的更改。
其次，您要重置一次状态（您需要尽可能少地更新状态）。

---

最后，您需要保留来自事件的值，因为如果在setState回调完成执行时事件更新，您将有另一个事件。所以最好将所有必需的值都分配给变量。

在我看来，最好的方法是

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
    }
  }));
}

为什么是最佳选择。
首先减少对现有代码的更改。
其次，您要重置一次状态（您需要尽可能少地更新状态）。

---

最后，您需要保留来自事件的值，因为如果在setState回调完成执行时事件更新，您将有另一个事件。所以最好将所有必需的值都分配给变量。

可以说是React中最常见的错误：在

setState（）

：）之后使用状态变量可能是@Chris的重复。我知道它不起作用，但老实说，我不知道另一种方法，所以我想展示一下我做了什么，不用担心<代码>设置状态是异步的，这意味着它不会立即更新，设置状态之后的任何代码都将在更新之前运行。要解决此问题，可以使用callback参数。查看链接帖子我想我有一个解决方案，在输入上使用

ref

，这可能是React中最常见的错误：在

setState（）

：）之后使用状态变量可能是@Chris的重复项我知道它不起作用，但老实说，我不知道另一种方法，所以我想证明我做了一些事情，没有担心

setState

是异步的，这意味着它不会立即更新，并且setState之后的任何代码都不会立即更新