如何使用预设值自动填写表单并在 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 标识符形式。 这将确保它在值更改时被调用。