Question

在Formik中，如何使“重置”按钮仅在确认后重置表单？

即使您单击“取消”，下面的代码仍会重置表单。

var handleReset = (values, formProps) => {
    return window.confirm('Reset?'); // still resets after you Cancel :(
};

return (
  <Formik onReset={handleReset}>
    {(formProps) => { 
      return (
        <Form>
          ...
          <button type='reset'>Reset</button>
        </Form>
      )}}
  </Formik>
);

Answer 1

如果使用 useFormik 钩子，则在 onClick 事件上使用 formik.resetForm()，或者如果您使用的是 <Formik> 组件，那么您可以这样做：

onSubmit={(values, { setSubmitting, resetForm }) => {
    // your code
    resetForm();
}}

Answer 2

我不确定，但是我认为您必须编写自己的重置功能，而无需使用reset类型的按钮。像这样：

const handleReset = (resetForm) => {
  if (window.confirm('Reset?')) {
    resetForm();
  }
};

function Example() {
  return (
    <Formik initialValues={{ value: 1 }}>
      {formProps => {
        return (
          <Form>
            <Field name="value" type="number" />
            <button
              onClick={handleReset.bind(null, formProps.resetForm)}
              type="button"
            >
              Reset
            </button>
          </Form>
        );
      }}
    </Formik>
  );
}

如果您真的想使用onReset，我认为唯一的方法是抛出错误。 Formik source code似乎表明resetForm()函数返回的值都会被调用onReset()。

const handleReset = () => {
  if (!window.confirm('Reset?')) {
    throw new Error('Cancel reset');
  }
};

function Example() {
  return (
    <Formik initialValues={{ value: 1 }} onReset={handleReset}>
      {formProps => {
        return (
          <Form>
            <Field name="value" type="number" />
            <button type="reset">
              Reset
            </button>
          </Form>
        );
      }}
    </Formik>
  );
}

尽管我个人还是会采用第一个解决方案。

Answer 3

我了解OP的问题是Formik。

但是，对于使用useFormik钩子并希望在“重置”按钮单击时清除表格的人，这是一种实现方法。

<button type="reset" onClick={ e => formik.resetForm()}> Reset</button>

Answer 4

您好@Aximili，您可以在onSubmit中使用df$arb=15 plot_ly(df, color = I("gray80")) %>% add_segments(x = ~mom, xend = ~daughter, y = ~cnum+.2, yend = ~cnum+.2, showlegend = FALSE) %>% add_markers(x = ~mom, y = ~cnum+.2, name = "Mother", color = I("purple"), size=2) %>% add_markers(x = ~daughter, y = ~cnum+.2, name = "Daughter", color = I("pink"), size=2) %>% add_segments(x = ~dad, xend = ~son, y = ~cnum-.1, yend = ~cnum-.1, showlegend = FALSE) %>% add_markers(x = ~dad, y = ~cnum-.1, name = "Father", color = I("navy"), size=2) %>% add_markers(x = ~son, y = ~cnum-.1, name = "Son", color = I("blue"), size=2) %>% add_markers(x = ~arb, y = ~country, name = " ", color = I("white"), yaxis = "y2") %>% layout( yaxis=list(title="", tickfont=list(color="white")), yaxis2 = list(overlaying = "y", side = "left", title = "")) )。

resetForm

onSubmit={(values, { resetForm }) => { // do your stuff resetForm(); }}可以做什么？

立即重置表单。这将清除并触摸错误，将isSubmitting设置为false，将isValidating设置为false，然后使用当前WrappedComponent的prop或作为参数传递的内容重新运行mapPropsToValues。后者对于在componentWillReceiveProps中调用resetForm很有用。

Answer 5

一种方法是对表单元素使用javascript .reset()函数。例如：

function Example() {
  return (
    <Formik initialValues={{ value: 1 }} 
     onSubmit={ 
       // submit handlers 
       document.getElementById("exampleForm").reset();
      }
    >
      {formProps => {
        return (
          <Form id="exampleForm">
            <Field name="value" type="number" />

          </Form>
        );
      }}
    </Formik>
  );
}

Formik-确认后如何重置表格

5 个答案: