javascript - Redux-Form handleSubmit 问题 [传递 handleSubmit() 一个 onSubmit 函数或传递 onSubmit 作为 prop]

Question

首先，我是 React 和 Redux 的绝对菜鸟。我正在使用 ' easydev ' 的管理模板，有时我觉得它很混乱。所以这是我的代码：

索引.jsx

import React from 'react';
import { connect } from 'react-redux';
import { compose } from 'redux';
import ActivityChart from './components/ActivityChart';
import MapFilter from './components/MapControl';
import MapLine from './components/MapLineDraft';

const CustomDashboard = ({ rtl }) => {
  const { t } = useTranslation('common');

  const submitFormData = (values) => {
    console.log(values);
  };

  

  return (
    <Container className="dashboard">
      <Row>
        <Col md={12}>
          <h3 className="page-title">{t('custom.page_title')}</h3>
        </Col>
      </Row>
      <Row>
        <ActivityChart dir={rtl.direction} />
        <MapLine />
        <MapFilter handleSubmit={submitFormData()} />

      </Row>
    </Container>
  );
};

CustomDashboard.propTypes = {
  rtl: RTLProps.isRequired,
};

export default compose(connect(state => ({
  rtl: state.rtl,
})))(CustomDashboard);

地图过滤器.jsx

import React from 'react';
import PropTypes from 'prop-types';
import {
  Button, ButtonToolbar,
} from 'reactstrap';
import { Field, reduxForm } from 'redux-form';
import axios from 'axios';
import renderSelectField from '@/shared/components/form/Select';
import DatePickers from './DatePickers';

function MapFilter({ handleSubmit, reset }) {  
  return (

    <form className="" onSubmit={handleSubmit}>
      <div className="">
        <Field
          placeholder="Select Car"
          name="select"
          component={renderSelectField}
          options={[
            { value: '1', label: 'Car-01' },
            { value: '2', label: 'Car-02' },
            { value: '3', label: 'Car-03' },
          ]}
        />
      </div>

      <div className="date_picker_row">
        <DatePickers />
      </div>
      <ButtonToolbar className="form__button-toolbar">
        <Button color="primary" type="submit">Submit</Button>
        <Button type="button" onClick={reset}>
          Cancel
        </Button>
      </ButtonToolbar>
    </form>
  );
}

MapFilter.propTypes = {
  handleSubmit: PropTypes.func.isRequired,
  reset: PropTypes.func.isRequired,
};



export default reduxForm({
  form: 'vehicle_tracking_form', // a unique identifier for this form
})(MapFilter);

因此，每当我运行此代码时，都会遇到以下错误：“您必须将 handleSubmit() 传递给 onSubmit 函数或将 onSubmit 作为道具传递”。

我已经尝试了 stackoverflow 的几种解决方案，但仍然没有掌握它。请你把它告诉我我做错了什么？

标签： javascriptreactjsreact-reduxredux-form