如何在选择另一部分单选按钮时取消选中另一部分单选按钮？

Question

我是新手，请帮助我澄清这个问题。 我想在选择另一个部分时取消选中部分的收音机。我正在使用材料 ui radioGroup。请使用代码沙箱链接进行代码更改。 https://codesandbox.io/s/5sdne?file=/demo.js

import * as React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@mui/material/styles';
import RadioGroup, { useRadioGroup } from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';

const StyledFormControlLabel = styled((props) => <FormControlLabel {...props} />)(
  ({ theme, checked }) => ({
    '.MuiFormControlLabel-label': checked && {
      color: theme.palette.primary.main,
    },
  }),
);

function MyFormControlLabel(props) {
  const radioGroup = useRadioGroup();

  let checked = false;

  if (radioGroup) {
    checked = radioGroup.value === props.value;
  }

  return <StyledFormControlLabel checked={checked} {...props} />;
}

MyFormControlLabel.propTypes = {
  /**
   * The value of the component.
   */
  value: PropTypes.any,
};

export default function UseRadioGroup() {
  return (
    <>
    <p>group A</p>
    <RadioGroup name="use-radio-group" defaultValue="first">
      <MyFormControlLabel value="first" label="First" control={<Radio />} />
      <MyFormControlLabel value="second" label="Second" control={<Radio />} />
    </RadioGroup>
    <p>group B </p>
    <RadioGroup name="use-radio-group" defaultValue="first">
      <MyFormControlLabel value="three" label="three" control={<Radio />} />
      <MyFormControlLabel value="four" label="four" control={<Radio />} />
    </RadioGroup>
    </>
  ); 

Answer 1

由于您使用第三方库来控制您的checkboxes，这非常困难，但不用担心，通过一些更改，您可以实现您的目标。

第一：

React 将重新渲染组件或元素及其 key 更改。

因此，我们可以实现一个过程，对RadioGroup 组件的key 属性进行一些更改，但是当您设置defaultValue 时，它需要一些技巧才能正常工作并取消选中其他组上的其他复选框

export default function UseRadioGroup() {
  const [defaultValueA, setDefaultValueA] = React.useState('first');
  const [defaultValueB, setDefaultValueB] = React.useState('three');

  const [keGroupA, setKeyGroupA] = React.useState("a");
  const [keyGroupB, setKeyGroupB] = React.useState("b");

  const handleChange = (e) => {
    const value = e.target.value;

    switch(value){
      case "first":
      case "second":
        setKeyGroupB(prevState => prevState + "a");
        setDefaultValueB(undefined)
        break;
      case "three":
      case "four":
        setKeyGroupA(prevState => prevState + "b");
        setDefaultValueA(undefined)
        break;
      default:
       return
    }
  }


  return (
    <>
      <p>group A</p>
      <RadioGroup name="use-radio-group" defaultValue={defaultValueA} key={keyGroupA} onChange={handleChange}>
        <MyFormControlLabel value="first" label="First" control={<Radio />}/>
        <MyFormControlLabel value="second" label="Second" control={<Radio />} />
      </RadioGroup>
      <p>group B </p>
      <RadioGroup name="use-radio-group" defaultValue={defaultValueB} key={keyGroupB} onChange={handleChange}>
        <MyFormControlLabel value="three" label="three" control={<Radio />} />
        <MyFormControlLabel value="four" label="four" control={<Radio />} />
      </RadioGroup>
    </>
  );
}

解释：

随着您的复选框的更改，onChange 方法将被调用，因此handleChange 函数确定具有所选复选框的value 的其他复选框。

如果您从 A 组中选择一个复选框，则值应为 first 或 two，因此所有其他复选框（本例中的“树”和“四”）都应取消选中，我们通过使用setKeyGroupB 方法更改B 组上的key。

另外，我们需要清除 B 组的默认值。为什么？

在key 发生更改后，B 组将重新渲染以获取其默认值（此处为three）。为了避免这种行为，已经定义了另一个状态变量并在 switch/case 块中进行更改。

注意：这不是做此类事情的最佳方式，但作为这些场景中的标准解决方案，您可以很好地使用它。