Question

我们正在努力为RadioGroup在页面加载时自动设置默认值。文档（https://material-ui.com/api/radio-group/）指示存在defaultValue属性，但它似乎没有生效。

我们在此处的沙盒演示中对此进行了处理，但无法使其正常运行：https://codesandbox.io/s/material-demo-8xgmd

从Sandbox演示中获取的代码：

  <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。是否可以在该版本的React中设置默认值？

Answer 1

如果使用支持钩子的React版本（> 16.8） （考虑到有问题的Stackblitz）

您必须使用useState()方法来更改React（材料设计）组件的内部状态。通过创建一个名为value的状态属性（该属性设置为male）来告诉MD RadioGroup组件您希望哪个单选按钮为默认单选按钮。然后，将value属性用作value属性“值”-并设置默认值。

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

更改：

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

收件人：

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

如果使用不带钩子的React版本（<16.8）

您需要使用标准状态变量将函数重写为React Component类。不幸的是，在这种情况下，Material Design的版本也是一个问题，因为Material Design调用了React的早期版本（createContext()中不存在的React方法。如果不使用React 16.8，则将Material Design降级至v1.0.0。

这是一个StackBlitz，它演示了第二个（更复杂的）解决方案：

StackBlitz

和相关代码：

class RadioButtonsGroup extends React.Component {
  constructor(props) {
    super(props);
    this.handleChange = this.handleChange.bind(this);
    this.classes = {
      root: {
        display: "flex"
      },
      formControl: {
        margin: 13
      },
      group: {
        margin: 10
      }
    };
    this.state = {
      value: "male"
    };
  }
  handleChange(event) {
    this.setState({ value: event.target.value });
  }
  render() {
    return (
      <div className={this.classes.root}>
        <FormControl component="fieldset" className={this.classes.formControl}>
          <FormLabel component="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="Gender"
            name="gender1"
            className={this.classes.group}
            value={this.state.value}
            onChange={this.handleChange}
          >
            <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>
        <FormControl component="fieldset" className={this.classes.formControl}>
          <FormLabel component="legend">Gender</FormLabel>
          <RadioGroup
            aria-label="gender"
            name="gender2"
            className={this.classes.group}
            value={this.state.value}
            onChange={this.handleChange}
          >
            <FormControlLabel
              value="female"
              control={<Radio color="primary" />}
              label="Female"
              labelPlacement="start"
            />
            <FormControlLabel
              value="male"
              control={<Radio color="primary" />}
              label="Male"
              labelPlacement="start"
            />
            <FormControlLabel
              value="other"
              control={<Radio color="primary" />}
              label="Other"
              labelPlacement="start"
            />
            <FormControlLabel
              value="disabled"
              disabled
              control={<Radio />}
              label="(Disabled option)"
              labelPlacement="start"
            />
          </RadioGroup>
          <FormHelperText>labelPlacement start</FormHelperText>
        </FormControl>
      </div>
    );
  }
}

在RadioGroup中设置默认的选定项目

1 个答案: