当前位置：首页 > React

react radio实现

2026-01-26 15:18:17React

实现 React 单选按钮（Radio）的方法

使用原生 HTML 单选按钮

在 React 中可以直接使用 HTML 的原生单选按钮，通过 checked 和 onChange 属性控制状态：

import React, { useState } from 'react';

function RadioExample() {
  const [selectedOption, setSelectedOption] = useState('option1');

  const handleChange = (event) => {
    setSelectedOption(event.target.value);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === 'option1'}
          onChange={handleChange}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === 'option2'}
          onChange={handleChange}
        />
        Option 2
      </label>
    </div>
  );
}

使用第三方库（如 Material-UI）

对于更复杂的 UI 需求，可以使用 Material-UI 的 Radio 组件：

import React, { useState } from 'react';
import Radio from '@mui/material/Radio';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormControl from '@mui/material/FormControl';

function MaterialRadioExample() {
  const [value, setValue] = useState('female');

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

  return (
    <FormControl>
      <RadioGroup
        aria-label="gender"
        name="controlled-radio-buttons-group"
        value={value}
        onChange={handleChange}
      >
        <FormControlLabel value="female" control={<Radio />} label="Female" />
        <FormControlLabel value="male" control={<Radio />} label="Male" />
      </RadioGroup>
    </FormControl>
  );
}

自定义 Radio 组件

可以创建自定义的 Radio 组件以实现特定样式或功能：

import React, { useState } from 'react';

function CustomRadio({ label, value, checked, onChange }) {
  return (
    <label>
      <input
        type="radio"
        value={value}
        checked={checked}
        onChange={onChange}
        style={{ marginRight: '8px' }}
      />
      {label}
    </label>
  );
}

function CustomRadioExample() {
  const [selected, setSelected] = useState('A');

  return (
    <div>
      <CustomRadio
        label="Option A"
        value="A"
        checked={selected === 'A'}
        onChange={(e) => setSelected(e.target.value)}
      />
      <CustomRadio
        label="Option B"
        value="B"
        checked={selected === 'B'}
        onChange={(e) => setSelected(e.target.value)}
      />
    </div>
  );
}

使用 Context API 管理 Radio 组状态

对于更复杂的场景，可以使用 Context API 来管理 Radio 组的状态：

react radio实现

import React, { createContext, useContext, useState } from 'react';

const RadioContext = createContext();

function RadioGroup({ children, onChange }) {
  const [value, setValue] = useState(null);

  const handleChange = (newValue) => {
    setValue(newValue);
    onChange(newValue);
  };

  return (
    <RadioContext.Provider value={{ value, handleChange }}>
      <div>{children}</div>
    </RadioContext.Provider>
  );
}

function RadioOption({ value, children }) {
  const { value: selectedValue, handleChange } = useContext(RadioContext);

  return (
    <label>
      <input
        type="radio"
        checked={selectedValue === value}
        onChange={() => handleChange(value)}
      />
      {children}
    </label>
  );
}

function ContextRadioExample() {
  return (
    <RadioGroup onChange={(value) => console.log('Selected:', value)}>
      <RadioOption value="apple">Apple</RadioOption>
      <RadioOption value="orange">Orange</RadioOption>
    </RadioGroup>
  );
}