Redux-form v6 показывает ошибку проверки для поля выбора

В v6 редукционной формы мы можем показать ошибки для обычных полей ввода, например, следующие

Мы можем создать собственный renderField, как это

const renderField = ({ input, label, type, meta: { touched, error } }) => (
  <div>
    <label>{label}</label>
    <div>
      <input {...input} placeholder={label} type={type}/>
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

И в форме просто мы можем использовать этот пользовательский renderField

 <Field name="username" type="text" component={renderField} label="Username"/>

Теперь мне нужно знать, как мы можем сделать то же самое для поля выбора и как мы должны передать параметры раскрывающегося списка в этот пользовательский renderFields. Любая идея создать собственный renderField для выбора?


reactjs redux redux-form
person Raj Adroit    schedule 14.09.2016    source источник
comment
это может помочь redux-form.com/6.0.0-alpha. 15/примеры/выбор значений формы   -  person Harkirat Saluja    schedule 14.09.2016
comment
он немного устарел, я могу отображать выбор, используя это, но не отслеживая события, изменения, значения в раскрывающемся списке   -  person Raj Adroit    schedule 15.09.2016

Ответы (1)


arrow_upward
17
arrow_downward

Если вы не возражаете против дублирования кода, вы можете сделать это так:

const renderSelectField = ({ input, label, type, meta: { touched, error }, children }) => (
  <div>
    <label>{label}</label>
    <div>
      <select {...input}>
        {children}
      </select>
      {touched && error && <span>{error}</span>}
    </div>
  </div>
)

Употребляйте в виде:

<Field name="username" component={renderSelectField} label="Username">
  { mySelectOptions.map(option => <option value={option.value}>{option.text}</option>) }
</Field>

Вы можете видеть, что передача опций в select осуществляется через props.children, точно так же, как если бы вы использовали компонент Field с component="select".

Если вы не хотите дублирования, вы можете вместо этого попытаться сделать оригинальный renderField немного умнее. Например, вы можете увидеть, содержит ли children теги параметров, и если да, отобразить <select> вместо input.

person Hans Roerdinkholder    schedule 15.09.2016
comment
Удивительно, спасибо, что сообщили мне об использовании атрибута children. - person Raj Adroit; 15.09.2016
comment
Как отключить выбор на основе локального состояния? - person Sunil tc; 21.04.2017
comment
Вы можете передавать произвольные реквизиты в поле, поэтому просто передайте один для отключенного состояния <Field disabled={this.state.isDisabled}>. Теперь его может использовать «настоящий» тег <select>. - person Hans Roerdinkholder; 22.04.2017