javascript - React(next.js) 给了我 "handleSubmit is not defined"

Question

我使用了 React 类组件，但知道我想使用函数。我有一个问题，因为它一直告诉我handleSubmit 没有定义。但不是在调用中，而是在函数的开头。

这是正确的。

 class RegistrationForm extends React.Component {
 ........
      handleSubmit = e => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
        });
      };
............
render() {
..........
return{
........
}}

我把它改成了这个

   const RegistrationForm = () => {
  ..........
    handleSubmit = e => {
      e.preventDefault();
    axioswal
      .post('/api/users', {
        firstname,
        secondname,
        email,
        password,
      })
      .then((data) => {
        if (data.status === 'ok') {
          dispatch({ type: 'fetch' });
          redirectTo('/');
        }
          });
      };
  .....
  return {
  ......
  }

我在这里调用它

 return (
        <Form {...formItemLayout} onSubmit={this.handleSubmit}>
          <Form.Item
          label={

但我不知道该怎么做才能让它发挥作用。我将感谢任何帮助。

Answer 1

在函数组件中，您不会将组件内部的函数定义为属性，因此必须使用 const。

所以你的代码将如下所示:

const RegistrationForm = props => {
  ........

  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  ..........

  return .........
}}

然后在返回语句中，您不会使用 this.handleSubmit，而只使用 handleSubmit。像这样:

return (
  <Form {...formItemLayout} onSubmit={handleSubmit}>
    <Form.Item
      label={

另外，在引用 props 时不要使用 this.props 。 Prop 作为函数参数传递给您的组件。