Redux Form -> Autofocus 第一个输入

Question

我有 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/>

Answer 1

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

中的内容

Redux Form -> Autofocus 第一个输入

Redux Form -> Autofocus first input

forms

redux

autofocus