我将包含 FORMIK 的功能组件更改为 class 组件并出现错误。为什么？

Question

我有包含 formik 的功能组件：

const SignupForm = () => {

    const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({  
      initialValues: {
          /....
      },
        validateOnBlur: false, 
        validateOnchange: false,
        validationSchema: yup.object().shape({    
          /.....
      }),   
      onSubmit: async (formValues) => {
          console.log('submit', formValues);
          setSubmitting(true);
          try {
              /.....
          } catch(e) {
              console.error(e);   
          } 
      },  
    });

   return (
   <form className="fform" onSubmit={handleSubmit}>   
      /....
       <button type="submit" disabled={isSubmitting}>Submit Form</button>       
   </form>
   );
};

但我需要将此组件更改为 class，我做到了：

class SignupForm extends React.Component {

    const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({  
      initialValues: {
          /....
      },
        validateOnBlur: false, 
        validateOnchange: false,
        validationSchema: yup.object().shape({    
          /....
      }),   
      onSubmit: async (formValues) => {
          console.log('submit', formValues);
          setSubmitting(true);
          try {
              /.....
          } catch(e) {
              console.error(e);   
          } 
      },  
    });
  render() {  
   return (
   <form className="fform" onSubmit={handleSubmit}>   
      /.....
       <button type="submit" disabled={isSubmitting}>Submit Form</button>       
   </form>
   );
  }
};

我遇到了错误：

./src/components/Signup/SignupForms.js
  Line 11:11:  Parsing error: Unexpected token

   9 | class SignupForm extends React.Component {
  10 |  
> 11 |     const {handleSubmit, values, handleChange, errors, handleBlur, isSubmitting, setSubmitting} = useFormik({  
     |           ^         
  12 |       initialValues: {
  13 |           username: '',
  14 |           password: '',

截图错误

如何解决这个错误？请帮我写一个class组件，这样就没有错误了。

Answer 1

您不能在 Class 组件中使用挂钩。

有一个库 (https://github.com/salvoravida/react-universal-hooks) 可以让您使用，但将两者混合使用并不是最佳做法。 React 团队做出这个限制是为了让事情保持理智。

您必须使用 withFormik higher-order component or their <Formik /> 组件，该组件使用渲染道具。

这是我放在一起的一个示例，它使用了他们的 render props 组件，因为它非常容易转换。

class SignupForm extends React.Component {


    render() {
        const formikProps = {
            initialValues: {
                //....
            },
            validateOnBlur: false,
            validateOnchange: false,
            validationSchema: yup.object().shape({
                //....
            }),
            onSubmit: async (formValues, { setSubmitting }) => {
                console.log('submit', formValues);
                setSubmitting(true);
                try {
                    ///.....
                } catch (e) {
                    console.error(e);
                }
            },
        };
        return (
            <Formik {...formikProps} >
                {props =>
                    (<form className="fform" onSubmit={props.handleSubmit}>
                        {/*/.....*/}
                        <button type="submit" disabled={props.isSubmitting}>Submit Form</button>
                    </form>)}
            </Formik>
        );
    }
};

这是更改为使用 class 而不是挂钩 https://codesandbox.io/s/cool-dew-ey8o9 的组件。除了数据调用之外的所有内容都可以自行运行（405 错误）。数据调用确实从表单中获取所有项目，这是重要的部分。

我将包含 FORMIK 的功能组件更改为 class 组件并出现错误。为什么？

I changed the functional component containing the FORMIK to the class component and got errors. Why?

javascript

reactjs

formik