ReactJS中如何获取单选按钮文本并存储到状态变量？

我来帮你搞定这个问题！要把单选按钮的文本内容存到React的state里其实不难，我给你两种实用的实现方案，适配不同的场景：

方案一：直接通过DOM获取选中项文本（适合静态写死的选项） #

先在你的contactform.js组件里初始化状态，然后给单选按钮绑定变更事件，通过DOM操作拿到对应的文本内容：

import { useState } from 'react';

const ContactForm = () => {
  // 初始化存储年龄文本的状态变量
  const [selectedAge, setSelectedAge] = useState('');

  // 处理单选按钮选中事件
  const handleAgeSelect = (e) => {
    // 获取当前选中的单选按钮元素
    const selectedRadio = e.target;
    // 这里假设你的单选按钮和文本是包裹在同一个label里的，直接取label的文本内容
    const ageText = selectedRadio.closest('label').textContent.trim();
    // 更新状态变量
    setSelectedAge(ageText);
    // 控制台打印验证一下
    console.log('选中的年龄范围：', ageText);
  };

  return (
    <form>
      <div className="age-question">
        <h3>问题1：你的年龄范围？</h3>
        <label>
          <input type="radio" name="age-group" onChange={handleAgeSelect} />
          >=25 yrs
        </label>
        <label>
          <input type="radio" name="age-group" onChange={handleAgeSelect} />
          26-35 yrs
        </label>
        <label>
          <input type="radio" name="age-group" onChange={handleAgeSelect} />
          36-45 yrs
        </label>
        <label>
          <input type="radio" name="age-group" onChange={handleAgeSelect} />
          46+ yrs
        </label>
      </div>
      {/* 可以在这里实时展示选中的结果，方便测试 */}
      <p className="selected-info">你当前选中的年龄：{selectedAge}</p>
    </form>
  );
};

export default ContactForm;

方案二：用选项数组渲染（更易维护，推荐） #

如果你的选项可能后续需要修改，把选项数据存在数组里，渲染的时候直接映射，这样不用操作DOM就能拿到文本，更可靠：

import { useState } from 'react';

const ContactForm = () => {
  // 提前定义年龄选项数组
  const ageOptions = [
    { value: '25-plus', text: '>=25 yrs' },
    { value: '26-35', text: '26-35 yrs' },
    { value: '36-45', text: '36-45 yrs' },
    { value: '46-plus', text: '46+ yrs' },
  ];

  const [selectedAge, setSelectedAge] = useState('');

  return (
    <form>
      <div className="age-question">
        <h3>问题1：你的年龄范围？</h3>
        {/* 遍历数组渲染单选按钮 */}
        {ageOptions.map(option => (
          <label key={option.value}>
            <input 
              type="radio" 
              name="age-group" 
              value={option.value}
              onChange={() => setSelectedAge(option.text)} 
            />
            {option.text}
          </label>
        ))}
      </div>
      <p className="selected-info">你当前选中的年龄：{selectedAge}</p>
    </form>
  );
};

export default ContactForm;

注意事项 #

• 所有同组的单选按钮必须设置相同的name属性，这样才能保证只能选中一个
• 如果你的DOM结构和示例不同（比如文本不在label里），可以调整方案一的DOM获取逻辑，比如用selectedRadio.nextSibling.textContent.trim()来获取相邻的文本节点

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