0

在使用 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：代码的哪一部分首先执行？

4

1 回答 1

1

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

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
于 2018-12-16T04:52:30.733 回答