如何使用預設值自動填寫表單並在 React 功能組件中觸發提交？

Question

我有一個帶有受控表單元素的功能組件。 當用戶填寫此表單時，它會更新 state 值。 當他們點擊提交時，我運行 function 讀取 state 值並進行 ajax 調用。

除此之外，我還想要一個一鍵式表單提交功能。 為了重用代碼，我一直在嘗試更新此一鍵鏈接后面的相同 state 值，然后觸發表單提交。

但是，由於 React 功能組件不支持 state 更新回調，我不能在沒有競爭條件的情況下調用提交 function。

我怎樣才能干凈地支持這兩個用例？

這是一個最小的組件布局來說明我所擁有的。

function Exhibit(props) {
  initialForm = {/* ... */};
  const [form, setForm] = useReducer((currForm, newValues) => ({...currForm, ...newValues}), initialForm);
  function oneClickSubmit() {
    setForm({
      // Preset values
    });
    submitForm();  // RACE CONDITION HERE
  }
  function submitForm() {
    // Does stuff with form
  }
  return <div>
    <form>
      {/* Fields that call setForm */}
      ...
    </form>
    <button onClick={submitForm}>Start</button>
  </div>
}

在 class 組件中，這將是小菜一碟。 只需更新 state，在回調中調用submitForm 。

Answer 1

您可以 React.useEffect 將在 state 中的表單值更新時調用。 在這里您可以驗證值並調用表單提交，而不是在formSubmit中執行

function Exhibit(props) {
  initialForm = {/* ... */};

const[isOneClickSubmit, setIsOneClickSubmit] = useState(false)

  const [form, setForm] = useReducer((currForm, newValues) => ({...currForm, ...newValues}), initialForm);


  React.useEffect(() => {
    if (validate(form) && isOneClickSubmit) {
      submitForm()
    }
  }, [form, isOneClickSubmit]);



  function oneClickSubmit() {
    setForm({
      // Preset values
    });
    setIsOneClickSubmit(true);
  }

  function submitForm() {
    // Does stuff with form
  }
  return <div>
    <form>
      {/* Fields that call setForm */}
      ...
    </form>
    <button onClick={submitForm}>Start</button>
  </div>
}

Note:確保在 useEffect 2nd array 參數中傳遞 state 標識符形式。 這將確保它在值更改時被調用。