Estoy comprobando si las contraseñas de los formularios de registro coinciden y, cuando lo hacen, algo cambia. pero está sucediendo en 1 "onChange" demasiado tarde. Ex. El usuario ingresa "DOG" como contraseña. cuando lo vuelve a escribir en la segunda entrada, "DOG" no funciona. pero lo hace si ingresan otro carácter o eliminan un carácter (Ej. "DOGX" o eliminan "G" por lo que es "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;Supongo que esto se debe a que está llamando a las funciones 'changeValue' y 'input' dentro del atributo input onChange. Dado que se activan al mismo tiempo, 'input' no usa el valor más reciente para 'info', porque 'changeValue' aún no ha establecido el nuevo estado.
Llame a la función de entrada dentro de un enlace useEffect que depende de los cambios en el estado de 'info', o use e.target.value en lugar del estado de información dentro de la función 'input' para comparar info.password != info.repeatPassword
EDITAR: aquí está la forma useEffect, lo simplifica y puede eliminar su función de entrada por completo: 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> ); }Definitivamente querrá implementar un useEffect aquí para actualizar la interfaz de usuario cada vez que cambie el estado de la contraseña y la repetición de la contraseña, para asegurarse de que después de escribir el último carácter obtenga la contraseña completa. Dentro de useEffect es donde escribirás tu lógica condicional. Lo que proporcioné es solo un buen ejemplo ...
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;