Redux-form-material-ui - используйте Select с onChange - PullRequest
Новая
       53

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

0 голосов
/ 17 мая 2018

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

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

Cannot read property 'onChange' of undefined

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

Пример кода

^^ Если вы откроете это в 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: * * Перевождите тысячу двадцать-одина форм-материал-UI / дерево / 5.0 * ** 1023 тысячи двадцать-два * 

<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
...