Error generado aquí:
useLayoutEffect(()=>{ const reInput = document.getElementById('confpassword'); reInput.onkeydown = function () { document.getElementById('messageCheck').style.display = "block"; } reInput.onblur = function () { document.getElementById('messageCheck').style.display = "none"; } })Mi campo de entrada está asociado con él...
<RStyle.Detailsform id="confpassword" type={confirmpassInputType} name="conf-password" minLength="8" required onChange={inputChange} onKeyDown={confirmPassChange}/>Mi mensaje de error Div
<RStyle.ErrorMessageCont> <RStyle.ErrorMessage1 id="messageCheck"> <p id="passCheck" className="invalid"> <VscError className='errorIcon' style={errorIcon} /> <VscCheck className='validIcon' style={validIcon} /> Password's Match </p> </RStyle.ErrorMessage1> </RStyle.ErrorMessageCont>Al usar React, la forma en que se manejan los eventos es ligeramente diferente a js clásico, ya que en lugar de realizar acciones directamente en el DOM, las haría a través del DOM virtual .
Aquí está el equivalente de lo que quiere lograr, en los estándares de React:
import { useState } from 'react'; const Component = () => { /** * Here you essentially set the state of the component * @see https://reactjs.org/docs/hooks-intro.html */ const [showErrorMessage, setShowErrorMessage] = useState(false); /** * Here we set the state of the error message on true, * so to display it with the condition below (showErrorMessage && ( .. )) */ const handleOnKeyDown = () => { setShowErrorMessage(true); confirmPassChange(); }; /** * Here we set the error message state on false so to hide it onBlur */ const handleOnBlur = () => { setShowErrorMessage(false); }; return ( <> {showErrorMessage && ( <RStyle.ErrorMessageCont> <RStyle.ErrorMessage1 id="messageCheck"> <p id="passCheck" className="invalid"> <VscError className="errorIcon" style={errorIcon} /> <VscCheck className="validIcon" style={validIcon} /> Password's Match </p> </RStyle.ErrorMessage1> </RStyle.ErrorMessageCont> )} <RStyle.Detailsform id="confpassword" type={confirmpassInputType} name="conf-password" minLength="8" required onChange={inputChange} onKeyDown={handleOnKeyDown} onBlur={handleOnBlur} // Note the events are listened directly from the component /> </> ); };