反应最终形式的焦点不关注给定的领域

Question

当用户按下按钮时，我试图专注于字段，我使用了focus('fieldName')，但它似乎不起作用。

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

Answer 1

@erikras在GitHub问题中回应：

这不是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>