React中如何使用useRef获取选中单选框的数量？

直接给多个单选框绑定单个useRef会导致current只指向最后一个元素，这就是你遇到myref.current.length为undefined的原因。要处理多个元素，需要用回调ref来收集所有单选框的DOM节点，具体实现如下：

步骤说明 #

• 用useRef创建一个空数组，用来存储所有单选框的DOM元素
• 给每个单选框添加回调ref，将元素存入数组
• 在处理函数中遍历数组，筛选出选中的单选框并统计数量
• 同时用useRef替代document.getElementById获取下拉菜单元素

完整代码示例 #

import { useRef, useState } from 'react';

const YourComponent = () => {
  const [value, setValue] = useState('');
  // 存储所有单选框的ref数组
  const radioRefs = useRef([]);
  // 存储下拉菜单的ref
  const menuRef = useRef(null);

  // 回调ref：将每个单选框元素存入数组
  const setRadioRef = (el) => {
    if (el && !radioRefs.current.includes(el)) {
      radioRefs.current.push(el);
    }
  };

  const handleValue = (event) => {
    setValue(event.target.value);

    // 统计选中的单选框数量
    const checkedCount = radioRefs.current.filter(radio => radio.checked).length;

    if (checkedCount >= 1) {
      // 通过ref操作下拉菜单
      menuRef.current.selectedIndex = 0;
    }
  };

  return (
    <div>
      {/* 单选框组：每个都绑定回调ref */}
      <input
        type="radio"
        name="myBtnDiscount"
        value="discount1"
        ref={setRadioRef}
        onChange={handleValue}
      />
      <input
        type="radio"
        name="myBtnDiscount"
        value="discount2"
        ref={setRadioRef}
        onChange={handleValue}
      />
      <input
        type="radio"
        name="myBtnDiscount"
        value="discount3"
        ref={setRadioRef}
        onChange={handleValue}
      />

      {/* 下拉菜单绑定ref */}
      <select id="myMenuSelect" ref={menuRef}>
        <option value="option0">默认选项</option>
        <option value="option1">选项1</option>
        <option value="option2">选项2</option>
      </select>
    </div>
  );
};

export default YourComponent;

关键细节 #

• 回调refsetRadioRef会在组件挂载时将每个单选框元素添加到radioRefs.current数组中
• 遍历数组时用radio.checked判断是否选中，统计数量更直接
• 下拉菜单用useRef直接绑定，替代document.getElementById，符合React的最佳实践

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