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

在“功能”组件中，您无需添加“此” 关键字。只需按原样调用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未定义”

3 个答案: