React-final-form 焦点不关注给定字段

【问题标题】：React-final-form focus doesn't focus on given fieldReact-final-form 焦点不关注给定字段
【发布时间】：2021-12-24 13:58:33
【问题描述】：

当用户按下按钮时，我试图将注意力集中在该字段上，我使用了focus('fieldName')，但它似乎不起作用。

下面是代码框： https://codesandbox.io/s/condescending-heisenberg-q8dcr?file=/src/App.jsx

【问题讨论】：

标签： reactjs redux-form react-final-form

【解决方案1】：

正如@erikras 在GitHub issue 中回复的那样：

这不是 form.focus() 所做的。 form.focus() 告诉 Final Form 某个字段已获得焦点。

您需要对 DOM 节点的实际引用。像这样： https://codesandbox.io/s/mystifying-mestorf-26yv8?file=/src/App.jsx

从codesandbox，我们应该const ref = useRef();带输入

<Field name="firstName" type="text">
          {({ input }) => (
            <input {...input} placeholder="First Name" ref={ref} />
          )}
</Field>

然后onClick:

    <button
      type="button"
      onClick={() => {
        ref.current.focus();
      }}
      disabled={submitting || pristine}
    >
      Focus
    </button>

【讨论】：