Redux表单自定义组件在更改时始终无意中提交表单

Question

我创建了此react-date-range（https://github.com/Adphorus/react-date-range）的自定义redux表单组件。当我更改数据时，此组件以某种方式无意中提交了表单。

这是我的组件实现

import React from 'react';

import 'react-date-range/dist/styles.css'; // main style file
import 'react-date-range/dist/theme/default.css'; // theme css file
import { DateRange } from 'react-date-range';

class RenderDateRange extends React.Component {
  constructor(props) {
    super(props);

    const initValues = props.input && props.input.value || {};

    this.state = {
      startDate: initValues.startDate || new Date(),
      endDate: initValues.endDate || new Date(),
      key: 'selection',
      showDatePicker : false
    }
  }

  constructEvent(selection) {
    return {
      startDate: selection.startDate.getTime(),
      endDate: selection.endDate.getTime()
    }
  }

  handleChange(payload) {
    this.setState({
      ...this.state,
      ...payload.selection
    });

    this.props.input.onChange(this.constructEvent(payload.selection));
  }

  render() {
    const {input} = this.props;

    return (
      <div>
        <DateRange
          {...input}
          onChange={this.handleChange.bind(this)}
          ranges={[this.state]}
          className={'PreviewArea'}
        />
      </div>
    );
  }
}

export default RenderDateRange;

这就是我的表格是关于

的

<form className="form" onSubmit={handleSubmit}>
    <Field name="eventDate" component={RenderDateRange} />
    <button className="btn btn-default btn-save" disabled={submitting || pristine || invalid}>
      Save
    </button>
</form>

这是包含以下形式的组件：    render（）{         const _props = this.props;

    return (
    <div>
        <div className="col-lg-10 col-md-10 col-sm-12 content-container">
          {this.renderNotification()}
          <NewCustomerForm { ..._props } onSubmit={_props.createCustomer.bind(this, _props.lang)}/>
        </div>
    </div>
    );
  }

任何人都知道我的实施有什么问题？

=============================================== =========

我也尝试从DateRange的道具中移除this.props.input和onChange，它仍然提交表单。

<DateRange
  ranges={[this.state]}
  className={'PreviewArea'}
/>