用 redux-form 反应 Datepicker答案

【问题标题】：React Datepicker with redux-form用 redux-form 反应 Datepicker
【发布时间】：2018-03-02 11:28:00
【问题描述】：

如何让 react-datepicker 与 redux-form 绑定？

我有这个 redux-form 字段：

<Field name="due_date" component={props =>
  <DatePicker
    {...props}
    readOnly={true}
    selected={this.state.due_date}
    value={this.state.due_date}
    onChange={this.handleDueDate}  
  />
} />

每当我提交 redux 表单时，都会返回一个不绑定日期选择器值的空对象...

我的 onChange ：

  handleDueDate(date) {
    this.setState({
      due_date: moment(date).format('L')
    }, () => {
      // do I need to dispatch and action here to update the redux-form in state tree? 
    })
  }

【问题讨论】：

DatePicker in Redux Form的可能重复

标签： reactjs redux react-redux redux-form react-datepicker

【解决方案1】：

你必须制作一个自定义组件来验证和使用 datepicker 和 redux-form

试试这个

const datePicker = ({ input, label, type, className, selected, meta: { touched, error } }) => (
      <div>
        <div>
          <DatePicker {...input}
            selected={selected} placeholder={label}
            type={type} className={className}
            peekNextMonth
            showMonthDropdown
            showYearDropdown
            dropdownMode="select"
          />
          {touched && error && <span className="error_field">{error}</span>}
        </div>
      </div>
    )

然后将 props 传递给该自定义组件

          <Field
            name="date_of_birth"
            component={datePicker}
            type="text"
            selected={this.state.date_of_birth}
            onChange={this.handleChange.bind(this)}
            className="form-control"
          />

【讨论】：

【解决方案2】：

对于未来的读者，只需转到此链接：DatePicker in Redux Form

首先，我创建了上面链接中提到的组件，并在其中传递了选定的道具。就我而言：

<Field
             name="due_date"
             component={DatePickerComponent}
             selected={this.state.date_of_briefing} />

【讨论】：