Javascript 设置放射组中的默认选定项

我们正在努力为RadioGroup的页面加载自动设置默认值。文档（）表明存在defaultValue属性，但它似乎没有生效

我们在这里的沙盒演示中使用了此功能，但无法使其正常工作：

来自沙盒演示的代码：

  <FormControl component="fieldset" className={classes.formControl}>
    <FormLabel component="legend">Gender</FormLabel>
    <RadioGroup
      aria-label="Gender"
      name="gender1"
      className={classes.group}
      value={value}
      onChange={handleChange}
      defaultValue="male">
      <FormControlLabel value="female" control={<Radio />} label="Female" />
      <FormControlLabel value="male" control={<Radio />} label="Male" />
      <FormControlLabel value="other" control={<Radio />} label="Other" />
      <FormControlLabel
        value="disabled"
        disabled
        control={<Radio />}
        label="(Disabled option)"
      />
    </RadioGroup>
  </FormControl>

性别

我们使用了这段代码，但无法在页面加载时选择“男性”单选按钮。我们是否可以为默认设置其他属性

---

后续问题：我们正在使用React 16.2。如果使用支持钩子（>16.8）的React版本，是否有办法在该版本的React中设置默认值？

（考虑到有关的闪电战）

您必须使用

useState（）

方法更改React（材料设计）组件的内部状态。这将通过创建名为

value

的状态属性（该属性设置为

male

），告知MD RadioGroup组件您希望将哪个单选按钮作为默认按钮。然后，将

value

属性用作

value

属性“value”-并设置默认值

这是对引用的沙箱第24行的简单更改：

更改：

const [value, setValue] = React.useState("female");

const [value, setValue] = React.useState("male");

至：

const [value, setValue] = React.useState("female");

const [value, setValue] = React.useState("male");

---

如果使用无挂钩的React版本（<16.8）

您需要使用标准状态变量将函数重写为React组件类。不幸的是，在这种情况下，材质设计的版本也是一个问题，因为材质设计调用的React方法在早期版本的React（

createContext（）

）中不存在。如果未使用React 16.8，请将材质设计降级为v1.0.0

下面是StackBlitz演示的第二个（更复杂）解决方案：

及有关守则：

class RadioButtonsGroup扩展了React.Component{
建造师（道具）{
超级（道具）；
this.handleChange=this.handleChange.bind（this）；
这是一个类={
根目录：{
显示：“flex”
},
表单控制：{
差额：13
},
组：{
差额：10
}
};
此.state={
价值观：“男性”
};
}
手变（活动）{
this.setState（{value:event.target.value}）；
}
render（）{
返回(
性别
性别
标签放置开始
);
}
}

您只需将checked属性设置为true（对于男性）和false（对于女性）。@JohnKrakov-对于通过React而不是DOM属性控制的嵌套React组件不起作用。value={value | |'male'}？谢谢Randy。我们现在得到：Uncaught TypeError:\uuu网页包\u导入的\u模块\u 0\u反应\uuuu默认值。a.useState不是带有react 16.2的函数。我们需要升级吗？我刚刚确认我们确实需要升级到16.8。有没有一种方法可以在不使用挂钩的情况下使用React 16.2实现这一点？是和否。这个代码会起作用的。不幸的是，材料设计似乎会以任何方式推动升级。降级对16.2作出反应，您将看到

createContext（）

相关错误，因为材料设计需要该方法，而它不在16.2中（您确定您使用的是16.2而不是16.4吗？），如果我将材料设计一路带回v1.0.0，那么我的Blitz中的代码会起作用。你一定也在使用一个非常旧的MD版本。