代码之家 › 专栏 › 技术社区 › Piotr Å»ak

Redux表单->自动对焦首次输入

autofocus redux forms

Piotr Å»ak · 技术社区 · 8 年前

我有Redux格式的组件,我需要自动对焦

现在它不起作用了。每次自动对焦第一次输入时,我应该做什么?

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 回复 | 直到 8 年前

Noitidart 8 年前

autoFocus 不会放入 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 处理所有其他道具并将其传递给 输入 像这样:

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

推荐文章

zuZuu · React Redux-无法设置未定义的属性(设置“value”)

4 年前

universe11 · 对伊默来说,这是正确的还是错误的?

4 年前

Huy282002 · 将redux toolkit与JS一起使用时,不能跳过在CreateSicle()中键入状态

4 年前

Mistakamikaze · React Redux |在全局Redux状态之前更新本地状态

4 年前

Kiv Daor · 当某些项具有未知值时,排序数组无法正常工作

4 年前

Chong Lip Phang · 不变性检查中间件在Redux工具包中做什么?

4 年前

geyser · React Redux toolkit-输入字段的状态管理

4 年前

Avishay Matayev · 正在获取redux的connect HOC的包装组件类型,以便与React一起使用。在不重新导入的情况下重新创建对象

4 年前

Hamed Ezati · 为什么项目会附加到redux而不是替换?

4 年前

Arash jahan bakhshan · redux未使用React 18重新呈现组件

4 年前