Reactjs 如何从材质ui控制放射组？

我有一个React（typescript）应用程序，我想显示一个广播组，但分成两列，如下所示：

为此，我使用

@material ui/core

中的两个RadioGroup，我希望完全控制它们，这样用户就无法在每个组中选择一个选项。我的问题是，放射组不关心我给他们的

值，他们似乎在不受控制的模式下工作。我甚至可以在他们的道具中看到这个值，在React开发工具中

我是这样做的：

<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>

组织属性
{props.attributes.filter（attribute=>attribute.isHierarchical.map（attribute=>(
))}
次要属性
{props.attributes.filter（attribute=>！attribute.isHierarchical.map（attribute=>(
))}

这两个放射组的渲染和功能都是正确的，它们还触发了
onChange
处理程序，但它们并不关心我给它们的值，它们只是过着自己的生活，因此它们并不相互排斥

我试图在一个代码沙盒中复制，但我甚至不能让一个放射组在那里工作。反正在这里：。我想不出比这更简单的事情了，但我仍然与此案有关。

这就是我如何使它工作的方法

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);

从“React”导入React；
从“react dom”导入react dom；
进口{
放射组，
FormControlLabel，
电台，
FormLabel
}来自“@材料界面/核心”；
导入“/styles.css”；
常数数据=[
{
id:“1”，
值：“你好”
},
{
id:“2”，
价值观：“如何”
},
{
id:“3”，
价值：“是”
},
{
id:“4”，
价值观：“你”
}
];
常数数据2=[
{
id:“1”，
价值：“罚款”
},
{id:“2”，值：“ty”}
];
函数App（）{
const[selection，setSelection]=React.useState({
值：“1”，
价值2：“1”
});
常量更新选择=（事件，值）=>{
event.persist（）；
const name=event.target.name；
setSelection（{…选择，[名称]：值}）；
};
返回(
你好
Value1:{selection.value}，Value2:{selection.Value2}
{data.map（数据=>(
))}
{data2.map（数据=>(
))}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

这就是我如何使它工作的方法

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);

从“React”导入React；
从“react dom”导入react dom；
进口{
放射组，
FormControlLabel，
电台，
FormLabel
}来自“@材料界面/核心”；
导入“/styles.css”；
常数数据=[
{
id:“1”，
值：“你好”
},
{
id:“2”，
价值观：“如何”
},
{
id:“3”，
价值：“是”
},
{
id:“4”，
价值观：“你”
}
];
常数数据2=[
{
id:“1”，
价值：“罚款”
},
{id:“2”，值：“ty”}
];
函数App（）{
const[selection，setSelection]=React.useState({
值：“1”，
价值2：“1”
});
常量更新选择=（事件，值）=>{
event.persist（）；
const name=event.target.name；
setSelection（{…选择，[名称]：值}）；
};
返回(
你好
Value1:{selection.value}，Value2:{selection.Value2}
{data.map（数据=>(
))}
{data2.map（数据=>(
))}
);
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；
多亏了Alessio的回答，我成功地在这里可用的代码沙盒中重现了我的情况：

在沙箱的第47行中，我将状态的默认值设置为空字符串。如果删除该选项并将其设置为
未定义
，则该选项将不起作用

因此，真正的问题是，如果不向
射线组提供
值
（或者如果提供
未定义
），组件将不受控制。就这么简单。为了避免这种情况，我只需要在没有选择的情况下提供一个空字符串，而不是
未定义的
。
多亏了Alessio的回答，我在这里可用的代码沙盒中重现了我的情况：

在沙箱的第47行中，我将状态的默认值设置为空字符串。如果删除该选项并将其设置为
未定义
，则该选项将不起作用

因此，真正的问题是，如果不向
射线组提供
值
（或者如果提供
未定义
），组件将不受控制。就这么简单。为了避免这种情况，我只需要在没有选择的情况下提供一个空字符串，而不是
未定义的
。
谢谢！我修改了你的代码以成功再现我的情况。我已经发现了这个问题，我会写一个答案。谢谢你的帮助！非常感谢。我修改了你的代码以成功再现我的情况。我已经发现了这个问题，我会写一个答案。谢谢你的帮助！