reactjs - 无法读取未定义的属性“提交”-React

Question

我用 react-final-form 创建向导表单。当我单击一个按钮时，我收到此错误：

我不明白为什么会出现这样的消息。这是我的向导组件。

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>
                )}