reactjs - 如何将react-datepicker与redux表单一起使用？

Question

我正在尝试使react datepicker与redux-form一起使用，我已经在stackoverflow上阅读了我的答案，我使选择器工作正常，但由于某种原因我无法在字段上输入任何内容。有趣的是，如果我尝试粘贴有效日期(例如 12/30/2019)，那么它也有效。这是我的代码

import React from "react";
import { Field, reduxForm } from "redux-form";
import DatePicker from "react-datepicker";
import moment from "moment";

const RenderDatePicker = ({ input }) => (
  <div>
    <DatePicker
      {...input}
      className="form-control"
      onChange={date => input.onChange(moment(date).format("MM/DD/YYYY"))}
      selected={input.value ? moment(input.value, "MM/DD/YYYY") : null}
    />
  </div>
);

const SimpleForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field name={"datePicker"} component={RenderDatePicker} />

      <button type="submit">
        Submit
      </button>
    </form>
  );
};

export default reduxForm({
  form: "simple"
})(SimpleForm);

Answer 1

我所做的是创建一个单独的 Datepicker组件

export const FieldDatePicker = ({ input, placeholder, minDate, maxDate }) => (
    <DatePicker
        className="plus-icon"
        dateFormat="yyyy/MM/dd"
        selected={input.value || null}
        onChange={input.onChange}
        minDate={minDate}
        maxDate={maxDate}
        disabledKeyboardNavigation
        placeholderText={placeholder}
    />
);

然后使用 <Field /> 中的它

<Field
    component={FieldDatePicker}
    name="date_till"
    placeholder="YYYY/MM/DD"
/>