Question

我正在尝试将react-day-picker的{{1}}与react-final-form进行整合。

React Final Form需要为每个表单字段使用Field，这意味着只要您希望第三方表单元素在表单中可用，就可以创建适配器组件。适配器组件has to accept an input object containing value and onChange。建议是just to provide a new onChange。

This approach, which works for many other components, doesn't work for DayPicker。似乎问题是DayPicker doesn't actually have an onChange方法，因此由我们来管理日历更改时发生的事情，然后将日期存储在DayPicker预期的value属性中。

我在这里创建了一个codepen：https://codesandbox.io/s/github/pcraig3/date-picker-sandbox

我在react-final-form中有一个handleDayClick方法，该方法会在点击天数时运行，但不会始终为日历触发Calendar.js。

onChange正在selectedDays内立即更新，但Calendar在日历未关注之前未获得正确的日期
表单的Form方法只被调用一次（第一次选择一天），而每次更新本机文本输入值时都会调用它。

我希望表单值与日历的外部状态同步，并且每次单击/取消单击一天时都会触发validate方法。这有可能实现，还是我完全做错了？

Answer 1

使用<DayPickerInput>组件可能更容易。该组件使用标准的HTML输入，该输入支持onChange。我是这样的：

<Field name={id}>
  {({ input, meta }) => (
    <React.Fragment>
      <label htmlFor={id}>Date: </label>
      <DayPickerInput
        {...input}
        onDayChange={day => input.onChange(day)}
        inputProps={{ id: id }}
      />
      {meta.error && meta.touched && <div className="error">{meta.error}</div>}
    </React.Fragment>
  )}
</Field>

Answer 2

根据文档，您可以将逻辑添加到“ inputProps”道具中，因为这会将道具添加到输入组件中，所以您也可以在其中添加css。

inputProps对象 ：要添加到输入组件的其他道具。

您的代码将如下所示：

error: no function template matches function template specialization 'buildWrapper'
note: candidate template ignored: could not match 'type-parameter-0-1 &&' against 'bool'

如果仅使用onDayChange，它将在用户“单击”以选择日期后触发，而不是在用户实际在输入字段中键入日期时触发，如果使用此额外的onchange侦听器将为您提供保障启用了输入字段，以便用户键入他们可能输入的日期。

将onChange逻辑添加到第三方react-day-picker元素

2 个答案: