Formik javascript 语法

Question

我很难理解在使用 Formik 时通常使用的一些语法。我想很多人在开始使用 react 和 formik 时都会有这样的问题。请看一下这段代码：

export default Formik({
  mapPropsToValues: (props) => ({ 
    email: props.user.email,
    username: props.user.username,
    imaginaryThingId: props.user.imaginaryThingId,
  }),

  validationSchema: Yup.object().shape({
    email: Yup.string().email('Invalid email address').required('Email is required!'),
    username: Yup.string().required('This man needs a username'),
  }),

  handleSubmit: (values, { setSubmitting }) => {
    setTimeout(() => {
      // submit them do the server. do whatever you like!
      alert(JSON.stringify(values, null, 2));
      setSubmitting(false);
    }, 1000);
  },
})(UserForm);

问题 #1：export default Formik({}) 是做什么的？是函数定义吗？

问题 #2：validationSchema: Yup.object()这是什么？在对象定义之外使用冒号！？

问题 #3：首先执行代码的哪一部分？

Answer 1

我建议您先花一些时间熟悉一下 JavaScript，因为这些问题实际上并不特定于 React 或 Fromik。本质上，withFormik(options) returns 一个将 React 组件作为输入的函数和 returns 一个在内部管理表单状态的增强组件。以下基本上是您上面的内容，以应该回答您问题的方式编写。

const UserForm = /* base form component */
const mapPropsToValues = /* props mapper */
const validationSchema = /* validation schema */
const handleSubmit = /* submit handler */
const formikOptions = { mapPropsToValues, validationSchema, handleSubmit }
const EnhancedUserForm = withFormik(formikOptions)(UserForm)

export default EnhancedUserForm

Formik javascript 语法

Formik javascript syntax

javascript

reactjs

formik