Установка выбранного по умолчанию элемента в RadioGroup

Question

Мы стараемся, чтобы значение по умолчанию автоматически устанавливалось при загрузке страницы для RadioGroup.В документации (https://material -ui.com / api / radio-group / ) указано, что существует свойство defaultValue, но оно, похоже, не вступает в силу.

Мы поиграли с этим в демоверсии Sandbox здесь и не смогли заставить его работать: 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) (с учетом рассматриваемого стекаблица)

Необходимо использовать метод useState() для изменения внутреннего состояния React (Материал Дизайн) Компонент.Это сообщает компоненту Radio Radio Group, какую радио-кнопку вы хотите использовать по умолчанию, создав свойство состояния с именем value, которое установлено на male.Затем свойство value используется в качестве атрибута value «значение» - и это устанавливает значение по умолчанию.

Это простое изменение в строке 24 ссылочной песочницы:

Изменение:

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

Кому:

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

При использовании версии React без крючков (<16.8) </strong>

Вам нужно будет переписать вашу функцию как React Component Class, используя стандартную переменную состояния.К сожалению, версия Material Design также является проблемой в этом случае, так как Material Design вызывает метод React, которого нет в более ранней версии React (createContext()).Понизьте версию Material Design до v1.0.0, если вы не используете React 16.8.

Вот 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>
    );
  }
}