React Material UI RadioGroup не работает с FormControlLabel, возвращаемым компонентом - PullRequest
Новая
       70

React Material UI RadioGroup не работает с FormControlLabel, возвращаемым компонентом

0 голосов
/ 30 декабря 2018

У меня проблема с пользовательским интерфейсом материала RadioGroup в сочетании с FormControlLabels, возвращаемым компонентом.

В настоящее время я пытаюсь это сделать: 

<FormControl component="fieldset">
  <RadioGroup
    row
    name="genreSelection"
    className="genre-wrapper"
    value={this.state.selection}
    onChange={this.handleRadioSelection}
  >
  {
    this.state.genres.map(genre => (
      <GenreItem key={genre} label={genre} radioButton/>
    ))
  }
  </RadioGroup>
</FormControl>

И функция рендеринга GenreItem выглядит следующим образом: 

if (this.props.radioButton) {
  return (
    <FormControlLabel
      value={this.props.label}
      label={this.props.label}
      control={
        <Radio/>
      }
      className="genre-item"
    />
  );
}
// Another return here

Моя проблема в том, что FormControlLabel работает неправильно, поскольку "handleRadioSelection" не запускается ни на одномselection.

К настоящему времени я обнаружил, что входной элемент, сгенерированный из элемента Radio, не имеет name = "genreSelection" в качестве атрибута, что означает, что он не принадлежит определенной RadioGroup.выше.

Если я помещаю FormControlLabel из GenreItem и непосредственно в функцию this.state.genres.map , все работает простоотлично.

Я что-то не так делаю или это просто ограничение материального интерфейса?

1 Ответ

0 голосов
/ 31 декабря 2018

Если вы посмотрите на код RadioGroup , вы обнаружите, что он клонирует дочерние элементы, которые вы ему предоставляете, и добавляет несколько свойств.Вы должны отнести эти свойства в FormControlLabel.Вы можете сделать это, изменив GenreItem для рендеринга FormControlLabel следующим образом: 

// assign radioButton separately so it isn't part of labelProps
const { radioButton, ...labelProps } = this.props;
if (radioButton) {
    <FormControlLabel {...labelProps }
      label={this.props.value}
      control={
        <Radio/>
      }
      className="genre-item"
    />

Добавление {...labelProps} будет переносить реквизиты, добавленные RadioGroup.

Также, если вы хотитеметка и значение должны быть одинаковыми, важно передать value явно GenreItem, а не label, поскольку RadioGroup использует реквизит value для определения свойства checked.

Вот рабочий пример:

Edit pk50jkxqz7

...