带有react-final-form的react-datepicker

Question

我在react-final-form中使用了react-datepicker。我使用的是一个带有多步骤https://codesandbox.io/s/km2n35kq3v?file=/index.js的模板。问题是我不能将datepicker集成到组件中。我的代码看起来像这样：

    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>

    );

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

诚挚的问候

Answer 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>

希望这能对你有所帮助。