React-final-form 焦点不关注给定的领域

Question

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

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

Answer 1

正如@erikras 在GitHub issue 中的回应：

That's not what form.focus() does. form.focus() tells Final Form that a field has received focus.

You need an actual ref to the DOM node. Like this: https://codesandbox.io/s/mystifying-mestorf-26yv8?file=/src/App.jsx

从 codesandbox 中，我们应该 const ref = useRef(); 和 Input

<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>

React-final-form 焦点不关注给定的领域

React-final-form focus doesn't focus on given field

reactjs

redux-form

react-final-form