时间戳

首页 > 解决方案 > react-datepicker 与 react-final-form

reactjs - react-datepicker 与 react-final-form

问题描述

我在 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>

    );

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

最好的祝福

标签： reactjsreact-final-formreact-datepicker

解决方案

我使用了您发送的向导表单示例，并添加了与您类似的 DatePicker。 检查向导示例

但基本上，我改变了你的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>

希望这对您有所帮助。

推荐阅读