如何从material-ui 控制RadioGroup？

Question

我有一个 React（打字稿）应用程序，我想在其中显示一个无线电组，但分成两列，如下所示：

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

我是这样做的：

<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处理程序，但它们不关心我赋予它们的值，它们只是过着自己的生活，因此它们并不相互排斥。

我试图在codesandbox 中重现，但我什至无法让一个RadioGroup 在那里工作。无论如何，这就是： https: //codesandbox.io/s/gallant-cloud-yixdd。在保持与案件相关的同时，我想不出比这更简单的事情了。

Answer 1

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

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

所以真正的问题是，当你不提供 to value（RadioGroup或者如果你提供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);