react如何让radio选中取消

使用受控组件实现Radio选中与取消

在React中，可以通过受控组件的方式管理Radio按钮的状态。需要定义一个状态变量来存储当前选中的值，并通过onChange事件来更新这个状态。

import React, { useState } from 'react';

function RadioExample() {
  const [selectedValue, setSelectedValue] = useState(null);

  const handleChange = (event) => {
    const value = event.target.value;
    setSelectedValue(selectedValue === value ? null : value);
  };

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

使用自定义逻辑实现取消选中

另一种方法是添加一个清除按钮或通过双击当前选中的Radio来取消选择。这种方法需要额外的逻辑来处理取消操作。

import React, { useState } from 'react';

function RadioWithClear() {
  const [selectedOption, setSelectedOption] = useState(null);

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

  const handleClearSelection = () => {
    setSelectedOption(null);
  };

  return (
    <div>
      <label>
        <input
          type="radio"
          value="A"
          checked={selectedOption === 'A'}
          onChange={handleRadioChange}
        />
        Option A
      </label>
      <label>
        <input
          type="radio"
          value="B"
          checked={selectedOption === 'B'}
          onChange={handleRadioChange}
        />
        Option B
      </label>
      <button onClick={handleClearSelection}>Clear Selection</button>
    </div>
  );
}

使用自定义Radio组件

可以创建一个自定义的Radio组件来封装选中/取消逻辑，使代码更可重用。

import React, { useState } from 'react';

const CustomRadio = ({ value, selectedValue, onChange }) => {
  const isChecked = selectedValue === value;

  const handleClick = () => {
    onChange(isChecked ? null : value);
  };

  return (
    <label>
      <input
        type="radio"
        checked={isChecked}
        onChange={() => {}}
        onClick={handleClick}
      />
      {value}
    </label>
  );
};

function RadioGroup() {
  const [selected, setSelected] = useState(null);

  return (
    <div>
      <CustomRadio 
        value="X" 
        selectedValue={selected} 
        onChange={setSelected} 
      />
      <CustomRadio 
        value="Y" 
        selectedValue={selected} 
        onChange={setSelected} 
      />
    </div>
  );
}

注意事项

Radio按钮的标准行为是必须选择其中一个选项，取消选择不符合HTML规范。以上方法通过React的状态管理实现了非标准行为，需要注意这可能带来用户体验上的困惑。

对于需要真正可选/可不选的场景，考虑使用Checkbox或添加一个"None"选项可能更符合用户预期。

function BetterAlternative() {
  const [choice, setChoice] = useState(null);

  return (
    <div>
      <label>
        <input
          type="radio"
          checked={choice === 'A'}
          onChange={() => setChoice('A')}
        />
        Option A
      </label>
      <label>
        <input
          type="radio"
          checked={choice === 'B'}
          onChange={() => setChoice('B')}
        />
        Option B
      </label>
      <label>
        <input
          type="radio"
          checked={choice === null}
          onChange={() => setChoice(null)}
        />
        None
      </label>
    </div>
  );
}