密码状态迟到了一个字符的反应

Question

我正在检查注册表单的密码是否匹配，如果匹配，就会发生一些变化。但它发生在 1 个“onChange”上为时已晚。前任。用户输入“DOG”作为密码。当在第二个输入中重新输入时，“DOG”不起作用。但如果他们输入另一个字符或删除一个字符（例如“DOGX”或删除“G”所以它的“DO”）

import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import "./register.css";

function RegisterBoard() {
  const history = useHistory();
  const [register, changeRegister] = useState({
    password:       false,
    repeatPassword: false,

  });
  const [info, changeInfo] = useState({
    password: "",
    repeatPassword: "",
  });
  const changeValue = (e) => {
    const { name, value } = e.target;

    changeInfo((prev) => {
      return {
        ...prev,
        [name]: value,
      };
    });
  };

  const input = (e) => {
    const target = e.target.dataset.name;

    if (target != "repeatPassword") {
      changeRegister({
        ...register,
        [target]: true,
      });
    } else {
      if (info.password != info.repeatPassword) {
        changeRegister({
          ...register,
          repeatPassword: false,
        });
      } else {
        changeRegister({
          ...register,
          repeatPassword: true,
        });
      }
    }
  };

  return (
    <div className="registration-form">
      <form>
        <div>
          <input
            name="password"
            data-name="password"
            onChange={(e) => {
              changeValue(e);
              input(e);
            }}
            className="password"
            type="password"
            placeholder="ENTER YOUR PASSWORD HERE"
          />
          <div className="animated-button">
          </div>
        </div>
        <div>
         <input
            id="pwd"
            name="repeatPassword"
            data-name="repeatPassword"
            onChange={(e) => {
              changeValue(e);
              input(e);
            }}
            className="repeat-password"
            type="password"
            placeholder="REPEAT YOUR PASSWORD HERE"
          />
         </div>
        </div>
      </form>
    </div>
  );
}
export default RegisterBoard;

Answer 1

我猜这是因为您在输入 onChange 属性中同时调用了“changeValue”和“input”函数。由于它们同时触发，'input' 没有使用'info' 的最新值，因为'changeValue' 尚未设置新状态。

要么在 useEffect 挂钩中调用输入函数，该挂钩取决于对“信息”状态的更改，或者在“输入”函数中使用 e.target.value 而不是信息状态来比较 info.password ！= info.repeatPassword

编辑：这是 useEffect 方式，它简化了它，您可以完全删除您的输入功能：https://codesandbox.io/s/jolly-khorana-8s63b?file=/src/App.js

import React, { useState, useEffect } from "react";
import "./styles.css";

function RegisterBoard() {
  const [register, changeRegister] = useState({
    password: false,
    repeatPassword: false
  });
  const [info, changeInfo] = useState({
    password: "",
    repeatPassword: ""
  });

  const changeValue = (e) => {
    const { name, value } = e.target;

    changeInfo((prev) => {
      return {
        ...prev,
        [name]: value
      };
    });
  };

  useEffect(() => {
    let password = false;
    let repeatPassword = false;
    if (info.password !== "") {
      password = true;
      if (info.password === info.repeatPassword) {
        repeatPassword = true;
      }
    }
    changeRegister({ password, repeatPassword });
  }, [info]);

  return (
    <div className="registration-form">
      <form>
        <div>
          <input
            name="password"
            data-name="password"
            onChange={changeValue}
            className="password"
            type="password"
            placeholder="ENTER YOUR PASSWORD HERE"
          />
          <div className="animated-button"></div>
        </div>
        <div>
          <input
            id="pwd"
            name="repeatPassword"
            data-name="repeatPassword"
            onChange={changeValue}
            className="repeat-password"
            type="password"
            placeholder="REPEAT YOUR PASSWORD HERE"
          />
        </div>
      </form>

      <div>{info.password}</div>
      <div>{info.repeatPassword}</div>
      <div>{register.repeatPassword ? "match" : "don't match"}</div>
    </div>
  );
}

export default function App() {
  return (
    <div className="App">
      <RegisterBoard />
    </div>
  );
}

Answer 2

您肯定会希望在这里实现一个 useEffect 以在每次密码和 repeatPassword 状态更改时更新 UI，以确保在键入最后一个字符后获得完整的密码。在 useEffect 内部是您编写条件逻辑的地方。我提供的只是一个很好的例子......

import React, { useState, useEffect } from "react";
import { useHistory } from "react-router-dom";
import "./register.css";

function RegisterBoard() {
  const history = useHistory();
  const [password, setPassword] = useState('')
  const [repeatPassword, setRepeatPassword] = useState('')
  //const [register, changeRegister] = useState(false);

  const changeValue = (e) => {
    const { name, value } = e.target.value;

  const input = (e) => {
    const target = e.target.dataset.name;

    if (target != "repeatPassword") {
      changeRegister({
        ...register,
        [target]: true,
      });
    } else {
      if (info.password != info.repeatPassword) {
        changeRegister({
          ...register,
          repeatPassword: false,
        });
      } else {
        changeRegister({
          ...register,
          repeatPassword: true,
        });
      }
    }
  };


useEffect(() => {
    
    if((password !== "" && repeatPassword !== "") && (password !== 
       repeatPassword)){

         console.log("PASSWORDS DO NOT MATCH!!!")

    }

   console.log(password, repeatPassword)

  }, [password, repeatPassword])

  return (
    <div className="registration-form">
      <form>
        <div>
          <input
            name="password"
            data-name="password"
            onChange={(e) => changeValue(e)}
            className="password"
            type="password"
            placeholder="ENTER YOUR PASSWORD HERE"
          />
          <div className="animated-button">
          </div>
        </div>
        <div>
         <input
            id="pwd"
            name="repeatPassword"
            data-name="repeatPassword"
            onChange={(e) => changeValue(e)}
            className="repeat-password"
            type="password"
            placeholder="REPEAT YOUR PASSWORD HERE"
          />
         </div>
        </div>
      </form>
    </div>
  );
}
export default RegisterBoard;