反应日期选择器与反应最终形式

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，更新最终表单状态值，并用于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>

希望这对您有帮助。