如何专注于第一个输入字段 - redux-form

Question

我正在尝试将任何形式的第一个输入字段设置为焦点。那么，实现这样的最佳实践是什么？我怎样才能检查字段的类型？是文本、数字、复选框还是其他？

是通过监听 @redux-form 动作，然后派发焦点动作吗？

任何人都可以提出解决方案吗？

Answer 1

在 React 文档中有一个关于这个确切用例的很好的例子：https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 2

如果你想使用无状态功能组件，refs 对你没有好处。我的解决方案是将 first={true} 属性传递给 Field 并在组件内部检查它。它存在然后在输入字段上设置 autoFocus。

Answer 3

我认为对于 redux-form (v6+) 目前的技术水平是为 <input /> 提供 autoFocus 属性您希望自动聚焦的内容。

示例：

<Field component={renderFirstInput} type="text" />

const renderFirstInput = field => {
  return ( <input {...field.input} autoFocus /> )

}

Here is the Github issue link

您当然可以提供 autoFocus 属性作为 field.input 键。

Answer 4

使用这种方法，您可以每次都配置 autoFocus。

<Field component={renderFirstInput} autoFocus={true/false} />

const renderFirstInput = ({ autoFocus }) => {
  return ( <input autoFocus={autoFocus} /> )

}

如何专注于第一个输入字段 - redux-form

How to focus on first input field - redux-form

javascript

redux

redux-form

react-redux