react实现单选

React 实现单选功能

在 React 中实现单选功能可以通过多种方式完成，以下是几种常见的方法：

使用原生 <input type="radio">

通过原生 HTML 的 radio 输入类型，结合 React 的状态管理实现单选功能。创建一个状态变量来存储当前选中的值，并通过 onChange 事件更新状态。

import React, { useState } from 'react';

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

  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>
      <label>
        <input
          type="radio"
          value="option3"
          checked={selectedOption === 'option3'}
          onChange={handleChange}
        />
        Option 3
      </label>
    </div>
  );
}

export default RadioGroup;

使用 map 动态生成单选选项

如果选项是动态的，可以通过数组 map 方法生成单选按钮，减少重复代码。

import React, { useState } from 'react';

function DynamicRadioGroup() {
  const options = ['option1', 'option2', 'option3'];
  const [selectedOption, setSelectedOption] = useState('');

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

  return (
    <div>
      {options.map((option) => (
        <label key={option}>
          <input
            type="radio"
            value={option}
            checked={selectedOption === option}
            onChange={handleChange}
          />
          {option}
        </label>
      ))}
    </div>
  );
}

export default DynamicRadioGroup;

使用第三方库（如 react-radio-group）

如果需要更复杂的单选功能或更好的可维护性，可以使用第三方库如 react-radio-group。这些库通常提供更简洁的 API 和额外的功能。

import React, { useState } from 'react';
import { RadioGroup, Radio } from 'react-radio-group';

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

  return (
    <RadioGroup
      name="radioGroup"
      selectedValue={selectedValue}
      onChange={setSelectedValue}
    >
      <Radio value="option1" /> Option 1
      <Radio value="option2" /> Option 2
      <Radio value="option3" /> Option 3
    </RadioGroup>
  );
}

export default ThirdPartyRadioGroup;

自定义单选组件

如果需要完全自定义样式或行为，可以封装一个自定义的单选组件。

import React, { useState } from 'react';

function CustomRadio({ value, checked, onChange, children }) {
  return (
    <label>
      <input
        type="radio"
        value={value}
        checked={checked}
        onChange={onChange}
        style={{ display: 'none' }}
      />
      <span style={{ padding: '8px', background: checked ? 'lightblue' : 'white' }}>
        {children}
      </span>
    </label>
  );
}

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

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

  return (
    <div>
      <CustomRadio
        value="option1"
        checked={selectedOption === 'option1'}
        onChange={handleChange}
      >
        Option 1
      </CustomRadio>
      <CustomRadio
        value="option2"
        checked={selectedOption === 'option2'}
        onChange={handleChange}
      >
        Option 2
      </CustomRadio>
      <CustomRadio
        value="option3"
        checked={selectedOption === 'option3'}
        onChange={handleChange}
      >
        Option 3
      </CustomRadio>
    </div>
  );
}

export default CustomRadioGroup;

表单集成

如果单选按钮是表单的一部分，可以通过 form 和 onSubmit 处理选中的值。

import React, { useState } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault();
    console.log('Selected option:', selectedOption);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        <input
          type="radio"
          value="option1"
          checked={selectedOption === 'option1'}
          onChange={(e) => setSelectedOption(e.target.value)}
        />
        Option 1
      </label>
      <label>
        <input
          type="radio"
          value="option2"
          checked={selectedOption === 'option2'}
          onChange={(e) => setSelectedOption(e.target.value)}
        />
        Option 2
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default FormWithRadio;

以上方法涵盖了从基础到高级的单选实现方式，可以根据具体需求选择合适的方法。