Redux Form -> Первый ввод автофокуса - PullRequest
Новая
       7

Redux Form -> Первый ввод автофокуса

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

У меня есть компонент в Redux-Form, мне нужен автофокус на

Теперь он не работает.Что я должен делать для каждого ввода автофокуса каждый раз? 

const renderField = ({ input, label, type, meta: { touched, error, warning } }) => (
  <div>
    <div className ="group">
      <input className="text"
      {...input}
      type={type}/>
      <label>{label}</label>
      <span className="highlight"></span>
      <span className="bar"></span>
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
)


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

  <Field name="email"
   type="email"
    component={renderField}
     label="Email"
    require/>

1 Ответ

0 голосов
/ 06 июня 2018

autoFocus не попадает в группу input. Нам нужно вручную обработать это.

Единственные ключи, которые попадают в input: 

export type InputProps = {
  checked?: boolean,
  name: string,
  onBlur: { (eventOrValue: Event | any): void },
  onChange: { (eventOrValue: Event | any): void },
  onDrop: { (event: Event): void },
  onDragStart: { (event: Event): void },
  onFocus: { (event: Event): void },
  value: any
}

Как видно из исходного кода - https://github.com/erikras/redux-form/blob/master/src/FieldProps.types.js.flow#L29-L38

Также видно в документах - https://redux -form.com / 7.3.0 / docs / api / field.md / # input-props

Таким образом, мы изменили бы наш renderField для обработки всех других реквизитов и передали бы его input следующим образом: 

const renderField = ({ input, label, meta: { touched, error, warning }, custom, ...inputProps }) => (
  <div>
    <div className ="group">
      <input className="text" {...input} {...inputProps} />
      <label>{label}</label>
      <span className="highlight"></span>
      <span className="bar"></span>
      {touched && ((error && <span>{error}</span>) || (warning && <span>{warning}</span>))}
    </div>
  </div>
)

Обратите внимание на изменение, теперь оно <input className="text" {...input} {...inputProps} />.

Я добавил custom к деструктору, чтобы он был удален, поскольку это то, что в FieldProps - https://github.com/erikras/redux-form/blob/master/src/FieldProps.types.js.flow#L40-L63

...