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

Question

Formik 很新，我有一个简单的表单，它有验证。我需要有 2 个按钮，提交和保存按钮，它们大多会做同样的事情，但是，如果单击“保存”按钮，我希望验证被“禁用”，或者更确切地说，不再需要所有必填字段. 有什么想法可以实现这一目标吗？

下面的一些代码：

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

标签： javascriptreactjsformikyup

Answer 1

首先删除type="submit". 因为formik会像提交一样理解它并验证它。第二个添加onClick功能：

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

和：

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