withFormik，将函数作为props传递

IT技术 reactjs forms formik
2021-05-04 23:23:13

我正在使用 Formik 构建用户输入表单。我正在使用 withFormik 来处理我的表单。我目前正在像这样在我的组件中传递我的 handleSubmit：

export const CreateForm = withFormik({
  mapPropsToValues: () => ({
    primarySkill: "12"
  }),
  validationSchema: () => FormSchema,

  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      alert(JSON.stringify(values, null, 2)); // For testing
      setSubmitting(false);
    }, 1000);
  }
})(MyForm);

而不是这样做，我想<CreateForm handleSubmit={handleSubmit} />在我的 App.js（根）组件中传递这样的东西。任何人都可以给我一个提示如何做到这一点，好吗？

2个回答

您可以按照问题底部提示的方式通过 props 传递函数。然后，您可以将withFormik调用包装在组件的函数体内，CreateForm以便您可以将 props 传递给CreateForm组件并CreateForm控制这些 props 如何映射到 Formik 组件。

例如：

const MyComponent = props => {
    function handleSubmit(values, { setSubmitting }) {
        // handle
    }

    return (
        <CreateForm handleSubmit={ handleSubmit }/>
    )
}

const CreateForm = props => {
    const { handleSubmit } = props;

    const MyFormWithFormik = withFormik({
        // ...,
        handleSubmit: handleSubmit,
    })(MyForm);

    return <MyFormWithFormik/>
}

handleSubmit 参数集中的第二个参数是 formik 包。props被传递到formik袋中。传入 formik bag 的 props 可以这样访问： handleSubmit: (values, { props }) => {...your function here}

其它你可能感兴趣的问题
上一篇仅使用 React 钩子（使用沙箱）处理调整大小事件的节流函数（受 lodash 启发） 下一篇将 react-redux 与 connect() 和 {...this.props} 一起使用