以反应最终形式单独提交组件

Question

const Buttons = () => {

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

       </>
  );
};

export default Buttons;

I have used react-final-form to create form for my react form. But I want to implement a seperate component for submit button. I need to have access to pristine but it gives me an error as there is not any form here in new component.

Does anyone have any solution?

Answer 1

Have you tried send the form as a parameter to the Buttons component? Also, I think you were missing a closing div in your code.

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

export default Buttons;

Answer 2

As I use Typescript I do not know what is the type of form which i want to send it through props to my Buttons component. Also, II do not know if this is a right solution or not. Or does react-final-form has anything to help solving the issue?