使用 react-final-form 时如何在输入字段上自动对焦？答案

【问题标题】：How to make autofocus on input field when using react-final-form?使用 react-final-form 时如何在输入字段上自动对焦？
【发布时间】：2019-02-05 14:27:37
【问题描述】：

我使用react-final-form 创建了一个表单。自动对焦不起作用。我知道的唯一解决方案是使用 React 的 ref 功能。我可以使用react-final-form 库自动聚焦输入吗？

import React from "react";
import { render } from "react-dom";
import { Form, Field } from "react-final-form";

const App = () => (
  <Form
    render={({}) => (
      <form>
        <Field name="company" component="input" autofocus />
      </form>
    )}
  />
);

render(<App />, document.getElementById("root"));

【问题讨论】：

仅供参考，在阅读了您的问题和答案后，这让我有点困惑，但autoFocus 不是最终形式的东西。这是一个 React 的东西，适用于任何需要关注的组件。在Field 上设置它只是将它传递给底层组件，这就是它起作用的原因。 final-form 似乎没有处理设置焦点，可能是因为如何执行此操作的细节取决于您实际使用的 UI 组件。我建议更新您的问题以反映这一点:-)

标签： reactjs forms autofocus react-final-form final-form

【解决方案1】：

使用大写 F，autoFocus，解决了我的问题。

【讨论】：