控件组件中使用自定义输入的问题-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
};

如果有人能看到所缺少的东西，那将是一个很大的帮助。"Name“被传递，当我提交时，我可以在控制台中看到它，但是对于”开始日期“不是:(

Answer 1

在您的自定义组件中，没有任何地方实际将值发送过--所有这些都保持在内部组件状态。您需要确保正在发送更改后的值：

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