如何从 material-ui 控制 RadioGroup？

Question

我有一个 React (typescript) 应用程序，我想在其中显示一个广播组，但像这样分成两列：

为此，我使用了来自@material-ui/core 的两个 RadioGroup，我希望完全控制它们，这样用户就无法在每个组中选择一个选项。我的问题是 RadioGroups 不关心我给他们的value，他们似乎在不受控制的模式下工作。我什至可以在 React DevTools 中看到他们的 props 中的值是可以的。

我是这样做的：

<div>Organizational attributes</div>
<div>
  <RadioGroup
    value={selectedPivotAttribute && selectedPivotAttribute.id.toString()}
    onChange={selectPivotAttribute}
  >
  {props.attributes.filter(attribute => attribute.isHierarchical).map(attribute => (
    <FormControlLabel
      label={attribute.name}
      key={attribute.id}
      value={attribute.id.toString()}
      control={<Radio/>}
    />
  ))}
  </RadioGroup>
</div>

<div>Secondary attributes</div>
<div>
  <RadioGroup
    value={selectedPivotAttribute && selectedPivotAttribute.id.toString()}
    onChange={selectPivotAttribute}
  >
  {props.attributes.filter(attribute => !attribute.isHierarchical).map(attribute => (
    <FormControlLabel
      label={attribute.name}
      key={attribute.id}
      value={attribute.id.toString()}
      control={<Radio/>}
    />
  ))}
  </RadioGroup>

</div>

这两个 RadioGroup 被正确渲染并正常运行，它们也触发了onChange 处理程序，但它们并不关心我赋予它们的价值，它们只是过着自己的生活，因此它们并不相互排斥。

我正在尝试在代码盒中进行复制，但我什至无法让 RadioGroup 在那里工作。无论如何，这里是：https://codesandbox.io/s/gallant-cloud-yixdd。在保持与案件相关的同时，我想不出比这更简单的事情了。

Answer 1

感谢 Alessio 的回答，我设法在此处提供的代码沙箱中重现了我的情况：https://codesandbox.io/s/vigorous-napier-huo9b。

在沙箱中，第 47 行，我将状态的默认值设置为空字符串。如果您将其删除以将其设置为undefined，它将无法正常工作。

所以真正的问题是，当您不向RadioGroup 提供value（或者如果您提供undefined）时，组件将不受控制。就那么简单。为了避免这种情况，我只需要在不打算选择时提供一个空字符串而不是 undefined。

Answer 2

https://codesandbox.io/s/gallant-cloud-hyq90

这就是我设法使它工作的方法

import React from "react";
import ReactDOM from "react-dom";

import {
  RadioGroup,
  FormControlLabel,
  Radio,
  FormLabel
} from "@material-ui/core";

import "./styles.css";

const data = [
  {
    id: "1",
    value: "Hello"
  },
  {
    id: "2",
    value: "How"
  },
  {
    id: "3",
    value: "are"
  },
  {
    id: "4",
    value: "you"
  }
];

const data2 = [
  {
    id: "1",
    value: "fine"
  },
  { id: "2", value: "ty" }
];

function App() {
  const [selection, setSelection] = React.useState({
    value: "1",
    value2: "1"
  });

  const updateSelection = (event, value) => {
    event.persist();
    const name = event.target.name;
    setSelection({ ...selection, [name]: value });
  };

  return (
    <div className="App">
      <FormLabel component="legend">Howdy</FormLabel>
      Value1: {selection.value}, Value2: {selection.value2}
      <RadioGroup
        name="value"
        value={selection.value}
        onChange={updateSelection}
      >
        {data.map(datum => (
          <FormControlLabel
            label={datum.value}
            key={datum.id}
            value={datum.id}
            control={<Radio color="primary" />}
          />
        ))}
      </RadioGroup>
      <RadioGroup
        name="value2"
        value={selection.value2}
        onChange={updateSelection}
      >
        {data2.map(datum => (
          <FormControlLabel
            label={datum.value}
            key={datum.id}
            value={datum.id}
            control={<Radio color="primary" />}
          />
        ))}
      </RadioGroup>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);