react-final-form 中的单独提交组件答案

【问题标题】：seperate submit component in react-final-formreact-final-form 中的单独提交组件
【发布时间】：2021-09-15 20:35:53
【问题描述】：

const Buttons = () => {

  return (
    <>
      <div>
        <button
          buttonType="submit"
          disabled={form.hasValidationErrors || form.pristine}
        >
          Save
        </button>

       </>
  );
};

export default Buttons;

我使用react-final-form 为我的反应表单创建表单。但我想为提交按钮实现一个单独的组件。我需要访问原始组件，但它给了我一个错误，因为新组件中没有任何形式。

有人有解决办法吗？

【问题讨论】：

标签： reactjs react-final-form

【解决方案1】：

您是否尝试将表单作为参数发送到Buttons 组件？另外，我认为您的代码中缺少一个结束 div。

const Buttons = ({form}) => {
    return (
      <>
        <div>
          <button
            buttonType="submit"
            disabled={form.hasValidationErrors || form.pristine}
          >
          Save
          </button>
        </div>
      </>
  );
};

export default Buttons;

【讨论】：

当我使用 Typescript 时，我不知道我想通过道具将它发送到我的按钮组件的表单类型是什么。另外，我不知道这是否是正确的解决方案。或者 react-final-form 有什么可以帮助解决问题的吗？

【解决方案2】：

当我使用 Typescript 时，我不知道我想通过 props 将它发送到我的 Buttons 组件的表单类型是什么。另外，我不知道这是否是正确的解决方案。或者 react-final-form 有什么可以帮助解决问题的吗？

【讨论】：