useLayoutEffect 无法正常工作。错误是什么？

Question

此处生成错误：

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

我的错误信息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>

Error Message

Answer 1

使用 React 时，处理事件的方式与经典 js 略有不同，因为不是直接对 DOM 执行操作，而是通过 virtual 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
      />
    </>
  );
};

useLayoutEffect 无法正常工作。错误是什么？

useLayoutEffect is not working properly. What is the error?

javascript

reactjs

web

react-hooks