Проблема с использованием пользовательского ввода в компоненте управления response-redux-form

Question

Я пытаюсь передать пользовательский ввод react-redux-form Управляющий компонент, и значение этого нового ввода передается при отправке со значениями из стандартных входов.

У меня есть пример кода здесь проблемы.

DatePicker:

import React, { Component } from 'react';
import 'react-datepicker/dist/react-datepicker.css';
import DatePicker from 'react-datepicker';
import moment from 'moment';

class DatePickerInput extends Component {
  constructor (props) {
      super(props)
      this.state = {
        startDate: moment()
      };
      this.handleChange = this.handleChange.bind(this);
    }

    handleChange(date) {
      this.setState({
        startDate: date
      });
    }

  render() {
    return (
      <div>
        <DatePicker
          selected={this.state.startDate}
          onChange={this.handleChange}
        />
      </div>
      );
  }
}

export default DatePickerInput;

Форма:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Control, Form } from 'react-redux-form';
import ProgressIndicator from './ProgressIndicator';
import DatePickerInput from './DatePickerInput';

export default class SubmissionForm extends Component {
  handleSubmit(values) {
    console.log('value', values);
  }

  customInput(props) {
    return (
       <DatePickerInput {...props}/>
    );
  }

  renderDatePicker(displayName, attributeName) {
    const modelName = `newSubmission.${attributeName}`;
    return (
      <div>
          <Control
            model={modelName}
            component={this.customInput}
          />
      </div>
    );
  }

  renderStep() {
    return (
      <Form
        model="newSubmission"
        onSubmit={(data) => this.handleSubmit(data)}
      >
       <div>
          <Control.text
            className="submission-form__field-input input"
            model="newSubmission.name"
          />
      </div>
      {this.renderDatePicker('Start Date', 'startDate')}
         <button
          type="next"
         >
           submit
         </button>
      </Form>
    );
  }

  render() {
    return (
      <div className="submission-form">
        {this.renderStep()}
      </div>
    );
  }
}

SubmissionForm.propTypes = {
  handleSubmit: PropTypes.func
};

Если кто-нибудь увидит, чего не хватает, это будет большая помощь. "Имя" пропущено, и я могу увидеть его в консоли при отправке, но для "Дата начала" это не так:(

Answer 1

В вашем пользовательском компоненте нигде нет фактической отправки значения - все это хранится во внутреннем состоянии компонента. Вам необходимо убедиться, что вы отправляете измененное значение:

handleChange(date) {
  this.setState({
    startDate: date
  });
  this.props.onChange(date)
}