react-datepicker 与 react-final-form答案

【问题标题】：react-datepicker with react-final-formreact-datepicker 与 react-final-form
【发布时间】：2020-12-02 10:57:20
【问题描述】：

我在 react-final-form 中使用 react-datepicker。我正在使用带有多个步骤的模板https://codesandbox.io/s/km2n35kq3v?file=/index.js。问题是我无法将日期选择器集成到组件中。我的代码如下所示：

    return (

        <Field name={props.name} parse={() => true}>
            {props => (
                <DatePicker
                    locale="de"
                    placeholderText="Datum eingeben"
                    selected={startDate}
                    dateFormat="P"
                    openToDate={new Date()}
                    minDate={new Date()}
                    disabledKeyboardNavigation
                    name={props.name}
                    value={startDate}
                    onChange={(date) => setStartDate(date)}
                />
            )}
        </Field>

    );

有谁知道我可以如何使用它以便在表单末尾传递数据？

最好的问候

【问题讨论】：

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

【解决方案1】：

我使用了您发送的向导表单示例，并添加了与您类似的 DatePicker。 Check the wizard example

但基本上，我将您的 onChange 方法更改为实际使用 react-final-form field 道具。现在，它使用this.props.input.onChange 更新最终表单状态值，并使用this.props.input.value 设置选定状态（然后您可以将初始值加载到最终表单中）：

const RenderDatePicker = ({ name, input, input: { value, onChange } }) => {
  return (
    <DatePicker
      locale="de"
      placeholderText="Datum eingeben"
      dateFormat="P"
      selected={value && isValid(value) ? toDate(value) : null} // needs to be checked if it is valid date
      disabledKeyboardNavigation
      name={name}
      onChange={(date) => {
        // On Change, you should use final-form Field Input prop to change the value
        if (isValid(date)) {
          input.onChange(format(new Date(date), "dd-MM-yyyy"));
        } else {
          input.onChange(null);
        }
      }}
    />
  );
};

        <div>
            <label>Date of birth</label>
            <Field
                name="dateOfBirth"
                component={RenderDatePicker}
                validate={required}
            />
            <Error name="dateOfBirth" />
        </div>

希望这对您有所帮助。

【讨论】：