帶有反應最終形式的反應日期選擇器

Question

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

    );

有誰知道我如何使用它以便在表單末尾傳遞數據？

最好的祝福

Answer 1

我使用了您發送的向導表單示例，並添加了與您的類似的 DatePicker。 檢查向導示例

但基本上，我更改了您的onChange方法以實際使用react-final-form field道具。 現在，它使用this.props.input.onChange更新最終形式 state 值，並使用this.props.input.value設置選定的 state（然后您可以將初始值加載到最終形式）：

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>

希望這對你有幫助。