React-final-form 焦點不集中在給定的領域

Question

當用戶按下按鈕時，我試圖專注於該字段，我使用了focus('fieldName') ，但似乎不起作用。

下面是代碼和框： 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

從代碼沙盒中，我們應該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>