Formik React 使用 2 个按钮（提交和保存）提交表单 - 保存按钮不触发验证

Question

Pretty new with Formik, I have a simple form, which has validation. I need to have 2 buttons, Submit and a Save button which will mostly do the same thing, however, if "Save" button is clicked, I want the validation to be "disabled" or rather, all required fields will no longer be required. Any ideas how I can achieve this?

Some codes below:

const initialValues = {
    title: "",
    description: ""
};

const validationSchema = Yup.object().shape({
        title: Yup.string()
            .max(50, 'You may only enter up to 50 characters')
            .required('Required'),
        description: Yup.string()
            .max(200, 'You may only enter up to 200 characters')
            .required('Required'),
        })


const CreateForm = () => {

    const handleCancel = () => {
        alert("Cancelled!")
    }

    return (
        <div>
            <Formik initialValues={initialValues}
                validationSchema={validationSchema}
                onSubmit={(values) => {
                    setTimeout(() => {
                        alert(JSON.stringify(values, null, 2));
                    }, 3000)
                }}
            >
                {props => (
                    <Form>
                        <CustomTextInput label="Title"
                            name="title" type="input" placeholder="Enter Title" />

                        <CustomTextInput label="Description"
                            name="description" type="input" placeholder="Description" />

                        <div>
                            <Button type="submit" variant="contained" color="primary">
                                Submit
                            </Button> &nbsp;
                            <Button type="submit" variant="contained" color="secondary" >
                                Save
                            </Button>&nbsp;
                            <Button variant="contained" color="default" onClick={handleCancel}>
                                Cancel
                            </Button>
                        </div>
                    </Form>
                )}
            </Formik>
        </div>
    )
}

export default CreateForm

Answer 1

Firstly remove type="submit" . Because formik will understand it like submit and will validate it. Second add onClick function:

<Button
  variant="contained"
  color="secondary"
  onClick={() => handleSave(props.values)} >Save</Button>

And:

const handleSave = (values) => {
  // do what you want like on submit
}

Answer 2

Create a variable

  const [btnClicked, setBtnClicked] = React.useState('');

Add the onClick event to buttons setting a value

              <Button type="submit" onClick={(event)=>{
                   setBtnClicked('save');
              }}> Save </Button>

              <Button type="submit" onClick={(event)=>{
                  setBtnClicked('save_and_close');
              }}>Save and close </Button>

On the formik submit event you can get the value of the button selected to do whatever you want

    onSubmit: (values) => {
      console.log(btnClicked);
    }