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

Question

我使用了 React Class 组件，但知道我想使用函数。我遇到了一个问题，因为它一直告诉我没有定义 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

在函数式组件中，您不需要输入"this"关键字。只需按原样调用 handleSubmit。

<Form {...formItemLayout} onSubmit={handleSubmit}></Form>

Answer 2

在您的方法定义(handleSubmit) 前面放置一个const。

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

当然，如果你使用过函数组件，就不需要把它放在调用方法中。

Answer 3

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

因此您的代码将如下所示：

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

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

  ..........

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

然后在你的 return 语句中你不会使用 this.handleSubmit，只是 handleSubmit。像这样：

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

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

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

React(next.js) is giving me "handleSubmit is not defined"

javascript

reactjs

next.js