在 Control 组件 react-redux-form 中使用自定义输入的问题

Question

我正在尝试将自定义输入传递给 react-redux-form 控件组件，并将新输入的值与标准输入的值一起提交。

我有一个问题的代码笔示例 here。

日期选择器：

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" 已通过，我可以在提交时在控制台中看到它，但是 "Start Date" 不是 :(

Answer 1

您的自定义组件中没有任何地方实际上发送值 - 它全部保存在内部组件状态。您需要确保发送更改后的值：

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

在 Control 组件 react-redux-form 中使用自定义输入的问题

issue using custom input in Control component react-redux-form

reactjs

redux

momentjs

react-redux-form

react-datepicker