Не удается прочитать свойство 'submit' из неопределенного - React

Question

Я создаю форму мастера с реактивной окончательной формой.Когда я нажимаю на кнопку, я получаю эту ошибку:

Я не понимаю, почему появляется такое сообщение.Это мой компонент Wizard.

import { Form as FinalForm } from 'react-final-form'; 
import { Button, Form, } from 'reactstrap';
    class Wizard extends Component {
      static Page = ({ children }) => children

      constructor(props) {
        super(props);
        this.state = {
          page: 0,
          values: props.initialValues || {},
        };
      }

      next = (values) => {
        const { children } = this.props;
        this.setState((state) => ({
          page: Math.min(state.page + 1, React.Children.toArray(children).length - 1),
          values,
        }));
        console.log('ha');
      }

      previous = () => {
        this.setState((state) => ({
          page: Math.max(state.page - 1, 0),
        }));
      }

      validate = (values) => {
        const { children } = this.props;
        const { page } = this.state;
        const activePage = React.Children.toArray(children)[
          page
        ];
        return activePage.props.validate ? activePage.props.validate(values) : {};
      }

      handleSubmit = (values) => {
        const { children, onSubmit } = this.props;
        const { page } = this.state;
        const isLastPage = page === React.Children.count(children) - 1;
        if (isLastPage) {
          onSubmit(values);
        } else {
          this.next(values);
        }
        console.log(children);
        console.log(React.Children.toArray(children));
        console.log('hao');
      }

      render() {
        const { children } = this.props;
        const { page, values } = this.state;
        const activePage = React.Children.toArray(children)[page];
        const isLastPage = page === React.Children.count(children) - 1;
        return (
          <FinalForm
            initialValues={values}
            validate={this.validate}
            onSubmit={this.handleSubmit}
          >
            {
              ({
                handleSubmit,
                submitting,
                pristine,
                invalid,
              }) => (
                <Form onSubmit={handleSubmit}>
                  {activePage}
                  <div className="buttons">
                    {page > 0 && (
                      <Button type="button" onClick={this.previous}>
                        « Previous
                      </Button>
                    )}
                    {!isLastPage && <Button color="success" type="submit">Next »</Button>}
                    {isLastPage && (
                      <Button color="success" type="submit" disabled={submitting || pristine || invalid}>
                        Submit
                      </Button>
                    )}
                  </div>
                </Form>
              )
            }
          </FinalForm>
        );
      }
    }

Когда я нажимаю на кнопку, функция handleSubmit, вероятно, не запускается, потому что console.log не отображается.Может кто-нибудь знает, почему появляется такое сообщение?Заранее спасибо за помощь.

Answer 1

У ваших кнопок нет события onClick:

        {!isLastPage && <Button color="success" type="submit">Next »</Button>}
                {isLastPage && (
                  <Button color="success" type="submit" disabled={submitting || pristine || invalid}>
                    Submit
                  </Button>
                )}

поэтому они должны быть такими:

        {!isLastPage && <Button color="success" type="submit" onClick={handleSubmit}>Next »</Button>}
                {isLastPage && (
                  <Button color="success" type="submit" disabled={submitting || pristine || invalid} onClick={handleSubmit}>
                    Submit
                  </Button>
                )}