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

我使用了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={

但是我不知道该怎么做才能使其工作。
感谢您的帮助。

最佳答案

在功能组件中，您无需将组件内部的功能定义为属性，因此必须使用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。道具作为函数参数传递给您的组件。

关于javascript - React(next.js)给我“handleSubmit未定义”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59370116/