React 单选按钮 Radio Button 详解

引言

单选按钮（Radio Button）是 Web 开发中常用的表单控件之一，用于在多个选项中选择一个。在 React 中，使用单选按钮可以非常方便地管理状态和用户交互。本文将从基础概念出发，逐步深入探讨 React 中单选按钮的常见问题、易错点及如何避免，并通过代码案例进行详细解释。

基础概念

在 HTML 中，单选按钮通过 <input type="radio"> 标签实现。为了确保同一组单选按钮中只能选择一个，需要给它们相同的 name 属性。

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

在 React 中，我们通常会将这些单选按钮封装在一个组件中，并使用状态（state）来管理选中的值。

基本用法

以下是一个简单的 React 组件示例，展示了如何使用单选按钮：

import React, { useState } from 'react';

function RadioButtonExample() {
  const [selectedValue, setSelectedValue] = useState('male');

  const handleRadioChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <div>
      <h2>Select Gender</h2>
      <label>
        <input
          type="radio"
          name="gender"
          value="male"
          checked={selectedValue === 'male'}
          onChange={handleRadioChange}
        />
        Male
      </label>
      <br />
      <label>
        <input
          type="radio"
          name="gender"
          value="female"
          checked={selectedValue === 'female'}
          onChange={handleRadioChange}
        />
        Female
      </label>
      <br />
      <label>
        <input
          type="radio"
          name="gender"
          value="other"
          checked={selectedValue === 'other'}
          onChange={handleRadioChange}
        />
        Other
      </label>
      <p>Selected Value: {selectedValue}</p>
    </div>
  );
}

export default RadioButtonExample;

常见问题及易错点

1. 忘记设置 checked 属性

在 React 中，单选按钮的状态是由组件的 state 管理的。因此，需要使用 checked 属性来同步表单元素的状态和组件的状态。

<input
  type="radio"
  name="gender"
  value="male"
  checked={selectedValue === 'male'}
  onChange={handleRadioChange}
/>

2. 多个单选按钮的 name 属性不一致

为了确保同一组单选按钮中只能选择一个，所有单选按钮的 name 属性必须相同。

<input
  type="radio"
  name="gender"
  value="male"
  checked={selectedValue === 'male'}
  onChange={handleRadioChange}
/>
<input
  type="radio"
  name="gender"
  value="female"
  checked={selectedValue === 'female'}
  onChange={handleRadioChange}
/>

3. 忽略 onChange 事件处理

单选按钮的状态变化需要通过 onChange 事件处理函数来更新组件的 state。

const handleRadioChange = (e) => {
  setSelectedValue(e.target.value);
};

进阶用法

1. 动态生成单选按钮

在实际应用中，单选按钮的选项可能来自后端数据。我们可以使用 map 方法动态生成单选按钮。

import React, { useState } from 'react';

function DynamicRadioButtonExample() {
  const [selectedValue, setSelectedValue] = useState('');
  const options = ['Option 1', 'Option 2', 'Option 3'];

  const handleRadioChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <div>
      <h2>Select an Option</h2>
      {options.map((option) => (
        <label key={option}>
          <input
            type="radio"
            name="option"
            value={option}
            checked={selectedValue === option}
            onChange={handleRadioChange}
          />
          {option}
        </label>
      ))}
      <p>Selected Value: {selectedValue}</p>
    </div>
  );
}

export default DynamicRadioButtonExample;

2. 使用 Controlled Component

在 React 中，表单元素可以是受控组件（Controlled Component），即其值由 React 的 state 管理。这种方式可以更好地控制表单元素的行为。

import React, { useState } from 'react';

function ControlledRadioButtonExample() {
  const [selectedValue, setSelectedValue] = useState('');

  const handleRadioChange = (e) => {
    setSelectedValue(e.target.value);
  };

  return (
    <div>
      <h2>Select a Color</h2>
      <label>
        <input
          type="radio"
          name="color"
          value="red"
          checked={selectedValue === 'red'}
          onChange={handleRadioChange}
        />
        Red
      </label>
      <br />
      <label>
        <input
          type="radio"
          name="color"
          value="green"
          checked={selectedValue === 'green'}
          onChange={handleRadioChange}
        />
        Green
      </label>
      <br />
      <label>
        <input
          type="radio"
          name="color"
          value="blue"
          checked={selectedValue === 'blue'}
          onChange={handleRadioChange}
        />
        Blue
      </label>
      <p>Selected Value: {selectedValue}</p>
    </div>
  );
}

export default ControlledRadioButtonExample;

总结

单选按钮是 React 表单中常用的控件之一，通过合理管理和使用状态，可以实现丰富的用户交互。本文从基础概念出发，介绍了单选按钮的基本用法、常见问题及易错点，并通过代码案例进行了详细解释。希望本文对大家在 React 中使用单选按钮提供了一些有用的指导。

参考资料

• React 官方文档
• MDN Web 文档