Redux-form-material-ui - используйте Select с onChange

Я использую redux-form-material-ui 5.0.0-beta.2, который совместим с материалом ui v1.

Я хочу иметь компонент Select, в котором я могу активировать событие onChange, когда выбор сделан, и хочу, чтобы выбранное значение отображалось в поле Select (как и должно). Если я использую компонент Select redux-form-material-ui, я получаю сообщение об ошибке:

Cannot read property 'onChange' of undefined 

Я могу воспроизвести это, взяв пример использования redux-form с материалом ui здесь и замените SelectField на redux-form-material-ui. Выберите и поместите {children} между тегами open и close. Вы можете увидеть ту же ошибку:

Пример кода

^^ Если вы откроете это в Chrome, вы получите ошибку «Cannot read property 'onChange'..», но в Firefox будет написано «_ref$input is undefined».

Можно ли это как-то исправить:

import { Select } from 'redux-form-material-ui';

const renderSelectField = (
  { input, label, meta: { touched, error }, children, ...custom },
) => (
    <Select 
      errorText={touched && error}
      {...input}
      onChange={(event, index, value) => input.onChange(value)}

      {...custom}
    >
      {children}
    </Select>
); 
const MaterialUiForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>

      <div>
        <Field
          name="favoriteColor"
          component={renderSelectField}
          label="Favorite Color"
        >
          <MenuItem value="ff0000" primaryText="Red" />
          <MenuItem value="00ff00" primaryText="Green" />
          <MenuItem value="0000ff" primaryText="Blue" />
        </Field>
      </div>

//code continues..

Если я попробую более простой подход, используя пример на redux-form-material-ui: redux-form-material-ui / tree / 5.0

<Field 
    name="plan" 
    component={Select}
    onChange={(event, index, value) => input.onChange(value)} 
    placeholder="Select a plan"
>
    <MenuItem value="monthly">Monthly</MenuItem>
    <MenuItem value="yearly">Yearly</MenuItem>
    <MenuItem value="lifetime">Lifetime</MenuItem>
  </Field>

Но это не сработает, если я добавлю onChange. При выделении говорится:

props.input is undefined

person Galivan    schedule 16.05.2018    source источник
comment
согласно документам это SelectField не Select github.com/erikras/redux-form-material-ui   -  person Ashh    schedule 19.05.2018


Ответы (1)


Вы, вероятно, искали пример в официальных документах Redux Form, но, как это было упомянуто в комментарии, они использовали SelectedField вместо компонента Select.

SelectField реализует метод onChange с 3 аргументами, однако Select использует только один. Используйте это вместо этого.

onChange={value => input.onChange(value)}
person Milex    schedule 14.02.2020