如何在 react-final-form 中更改表单值 onSubmit？答案

【问题标题】：How to change form values onSubmit in react-final-form?如何在 react-final-form 中更改表单值 onSubmit？
【发布时间】：2020-07-12 20:44:23
【问题描述】：

我正在使用React-Admin，它使用react-final-form 作为它使用的表单的底层组件。

我正在尝试在提交时仅使用已更改的字段进行 REST 调用。因此，假设 Field A 和 Field B 是不同的资源，它们要发送到不同的 REST 路由，假设两者都在表单中，并且只有 Field B 已更改，那么只有 Field B 应该发送到后端，所以以防止冗余的多个 API 请求。

反正我看了一下here，遇到的问题如下：

我有这个 onSubmit 处理程序：

  const handleClick = useCallback(() => {
    // prints 'before' value
    console.log(JSON.parse(JSON.stringify(form.getState().values)));

    const values = form.getState().values;

    // take out Field A, because Field A is NOT to be sent in the request
    const { FieldA, ...valuesToSubmit } = values;

    // How can I do this part? <------
    form.change('values', valuesToSubmit);

    handleSubmitWithRedirect(redirect);
  }, [form]); // useForm hook for react-final-form

我设法通过执行类似的操作来更改单个字段值，

form.change('FieldB', 'test');

但如果我有很多字段，我不想单独更改所有字段。是否可以用form.change(...) 替换整个values 对象？

【问题讨论】：

标签： reactjs react-admin react-final-form

【解决方案1】：

对于将来遇到此问题的任何人，我设法通过跟踪未更改的值并将其值设置为 undefined 来删除不提交到其各自后端 REST 路由的字段提交。像这样的东西，（注意，这与 React-Admin 框架结合使用，但我相信无论您在哪里使用 react-final-form，它都可以工作。

. . .
const { handleSubmitWithRedirect, redirect } = props;

const handleClick = useCallback(() => {
  // The field that I don't want sent to the backend
  form.change('fieldA', undefined);

  handleSubmitWithRedirect(redirect);
}, [form]);

. . .

return (
  . . .
  <SaveButton
    handleSubmitWithRedirect={handleClick}
  />
  . . .
)

【讨论】：