React中页面加载后用document.getElementById/useRef获取复选框元素报错

我尝试通过复选框收集用户是否愿意接收网站优惠更新邮件的输入，但在获取元素状态时反复报错。试过window.onload()、useEffect、useRef钩子，都没解决。

相关代码 #

使用document.getElementById()的实现 #

let wantEmailAndUpdates;
useEffect(() => {
  if (document.getElementById("wantEmailAndUpdates").checked) {
      wantEmailAndUpdates = document.getElementById("wantEmailAndUpdates").value;
  }
}, [])

对应的输入组件：

<label className="ContactInformationFormAccountEmailTitleEmailNewsCheckbox">
    <input type="checkbox" value={true} id='wantEmailAndUpdates' name='wantEmailAndUpdates' checked />
    Email me with news and offers
</label>

使用useRef钩子的实现 #

const wantEmailAndUpdatesRef = useRef(null)
useEffect(() => {
  if (wantEmailAndUpdatesRef.current.focus().checked) {
    wantEmailAndUpdates = wantEmailAndUpdatesRef.current.focus().value;
  }
}, [])

对应的输入组件：

<label className="ContactInformationFormAccountEmailTitleEmailNewsCheckbox">
    <input type="checkbox" value={true} ref={wantEmailAndUpdatesRef} id='wantEmailAndUpdates' name='wantEmailAndUpdates' checked />
    Email me with news and offers
</label>

错误原因分析 #

1. document.getElementById()方案：直接访问checked前未判断元素是否存在。即便空依赖的useEffect在组件挂载后执行，若组件存在条件渲染或DOM延迟加载，document.getElementById()可能返回null，此时访问checked就会触发错误。另外，复选框直接写死checked属性，属于非受控组件，无法响应用户的勾选操作。
2. useRef方案：错误调用了focus()方法——focus()返回undefined，后续访问.checked自然会报错。同时未先判断wantEmailAndUpdatesRef.current是否为null，也会导致类似问题。同样，复选框的checked属性未绑定状态，用户无法修改勾选状态。

正确解决方案 #

方案1：受控组件（推荐） #

React中处理表单输入优先使用受控组件，通过状态绑定管理复选框的勾选状态：

import { useState } from 'react';

function YourComponent() {
  // 初始化勾选状态
  const [wantEmailAndUpdates, setWantEmailAndUpdates] = useState(false);

  // 处理复选框变化
  const handleCheckboxChange = (e) => {
    setWantEmailAndUpdates(e.target.checked);
  };

  // 后续需要使用状态时，直接用wantEmailAndUpdates即可
  return (
    <label className="ContactInformationFormAccountEmailTitleEmailNewsCheckbox">
      <input 
        type="checkbox" 
        id='wantEmailAndUpdates' 
        name='wantEmailAndUpdates' 
        checked={wantEmailAndUpdates}
        onChange={handleCheckboxChange}
      />
      Email me with news and offers
    </label>
  );
}

方案2：非受控组件（useRef） #

若一定要用非受控组件，修正useRef的使用方式：

import { useRef, useEffect } from 'react';

function YourComponent() {
  const wantEmailAndUpdatesRef = useRef(null);
  let wantEmailAndUpdates;

  useEffect(() => {
    // 先判断current是否存在
    if (wantEmailAndUpdatesRef.current) {
      // 不要调用focus()，直接访问checked
      wantEmailAndUpdates = wantEmailAndUpdatesRef.current.checked;
      console.log(wantEmailAndUpdates);
    }
  }, []);

  return (
    <label className="ContactInformationFormAccountEmailTitleEmailNewsCheckbox">
      <input 
        type="checkbox" 
        ref={wantEmailAndUpdatesRef} 
        id='wantEmailAndUpdates' 
        name='wantEmailAndUpdates' 
        // 若需要默认勾选，用defaultChecked而非checked
        defaultChecked={true}
      />
      Email me with news and offers
    </label>
  );
}

关键注意点 #

• 受控组件用checked绑定状态，配合onChange更新状态；非受控组件用defaultChecked设置默认勾选状态，不要直接写死checked。
• 访问DOM元素或ref.current前，必须先判断是否为null，避免触发"Cannot read properties of undefined"错误。
• useRef方案中，不要在访问属性前调用focus()这类返回undefined的方法。

内容的提问来源于stack exchange，提问作者Priyanshu kuntal