此處生成錯誤：
useLayoutEffect(()=>{
const reInput = document.getElementById('confpassword');
reInput.onkeydown = function () {
document.getElementById('messageCheck').style.display = "block";
}
reInput.onblur = function () {
document.getElementById('messageCheck').style.display = "none";
}
})
我的輸入欄位與它相關聯...
<RStyle.Detailsform id="confpassword" type={confirmpassInputType} name="conf-password" minLength="8" required onChange={inputChange} onKeyDown={confirmPassChange}/>
我的錯誤資訊區
<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>
錯誤資訊
uj5u.com熱心網友回復：
使用 React 時，處理事件的方式與經典 js 略有不同，因為不是直接對 DOM 執行操作，而是通過虛擬 DOM來執行。
在 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
/>
</>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/428752.html
標籤：javascript 反应 网络 反应钩子