React(next.js) 给我“handleSubmit 未定义”

Question

I used react Class components but know I want to use functions. And I have a problem because it keeps telling me that handleSubmit is not defined. BUT not in call but like in the beginning of function.

This was correct.

 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{
........
}}

And i changed it to this

   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 {
  ......
  }

And I am calling it here

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

But I don't know what to do to make it work. I will be thankful for any help.

Answer 1

In Functional component, you don't need to put "this" keyword. Just call the handleSubmit as it is.

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

Answer 2

put a const in front of your method definition(handleSubmit).

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{
........
}}

and of course no need to put this in calling method if you've used function component.

Answer 3

In functional components you don't define functions inside the component as properties, so you have to use const .

So your code would look like this:

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

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

  ..........

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

And then in your return statement you wouldn't use this.handleSubmit , just handleSubmit . Like this:

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

Also, don't use this.props when referencing props. The props get passed to your component as function arguments.