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>
<Button type="submit" variant="contained" color="secondary" >
Save
</Button>
<Button variant="contained" color="default" onClick={handleCancel}>
Cancel
</Button>
</div>
</Form>
)}
</Formik>
</div>
)
}
export default CreateForm
最佳答案
首先删除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
}
关于javascript - Formik React 使用 2 个按钮(提交和保存)提交表单 - 保存按钮不触发验证,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/61749264/