提交后或使用formik单击取消按钮后如何重置表单

问题描述

const TextForm: React.FunctionComponent<Props> = (props) => { 

const formError = yup.object({
    name: yup.string().required("required"),});
      const formValidation = (fieldName) => {
        return {
          invalid: !!form.errors[fieldName] && form.touched[fieldName],invalidText: form.errors[fieldName],onBlur: form.handleBlur,};
      };  
 const form = useFormik({
        initialValues: {
          name,id,},formValidation
        formError,validateOnChange: true,validateOnMount: true,initialTouched: {},});
  
    return(
    <React.Fragment>
    <form>
     <TextInput
                        id="text-input-2"
                        {...validation("name")}
                        type="text"
                        name = "name"
                        onChange={(event) => {
                          setName(event.target.value);
                          form.handleChange(event);
                        }}
                      />
    <TextInput
                        id="text-input-2"
                        {...validation("id")}
                        type="text"
                        name = "id"
                        onChange={(event) => {
                          setId(event.target.value);
                        }}
                      />
    <Button>Clear</Button>
    <Button>Submit</Button>
    </form>
    </React.Fragment>
    ) 
    }

我的表单中的验证正常。但是，如果用户未输入任何字段，则会附带必填警告。我正在尝试在清除按钮单击上清除/重置表单，但是找不到任何可能的解决方案。谁能帮我这个忙。

解决方法

快速搜索Formik文档。

Formik onSubmit和onReset作为第二个参数传递了formikBag，其中包含resetForm动作。可以从此resetForm对象解构formikBag回调，并在您的回调中使用。

onSubmit onReset

const form = useFormik({
  initialValues: {
    name,id,},formValidation
  formError,validateOnChange: true,validateOnMount: true,initialTouched: {},onSubmit: (values,{ resetForm }) => {
    // submission logic
    resetForm();
  },onReset: (values,{ resetForm }) => resetForm(),});

您还只需要确保表单按钮具有正确的按钮类型，以便单击表单即可采取正确的操作。