Problem mit benutzerdefinierten Eingang in Control-Komponente react-redux-form

Question

Ich versuche, die eine benutzerdefinierte Eingabe an react-redux-form Control-Komponente zu übergeben, und den Wert dieser neuen Eingabe übergeben übergeben mit den Werten aus den Standard-Eingaben.

Ich habe ein Codepen-Beispiel here des Problems.

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; 

Form:

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

Wenn jemand sehen kann, was es fehlt eine große Hilfe wäre. Der „Name“ ist bestanden, und ich kann es in der Konsole sehen, wenn ich einreichen, aber für das „Startdatum“ ist nicht :(

Answer 1

Es nirgendwo in Ihrer benutzerdefinierten Komponente ist, die tatsächlich Senden wird den Wert über - Es wird alles im internen Komponentenzustand gehalten.Sie müssen sicherstellen, dass Sie den geänderten Wert senden:

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