3

我正在尝试将react-day-picker'sDayPicker与react-final-form.

React Final Form 需要Field为每个表单字段使用一个，这意味着只要您希望第三方表单元素在表单中可用，就创建一个适配器组件。适配器组件必须接受一个input包含valueandonChange的对象。建议只是提供一个新的onChange.

这种适用于许多其他组件的方法不适用于DayPicker. 似乎问题在于DayPicker它实际上没有onChange方法，因此由我们来管理日历更改时会发生什么，然后将日期存储在期望的value属性中。react-final-form

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

我有一种handleDayClick方法，Calendar.js可以在单击天数时运行，但onChange不会始终为日历触发。

  • selectedDays正在其Calendar自身内立即更新，但Form在日历未聚焦之前无法获得正确的日期
  • 表单的validate方法只被调用一次（第一次选择一天），而每次更新原生文本输入值时都会调用它。

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

4

2 回答 2

4

相反，使用该<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>
于 2018-08-14T10:05:53.623 回答
0

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

inputProps Object : 添加到输入组件的其他道具。

您的代码将如下所示：

const dateChanged = day => (console.log(day)); //function to call when date changes

inputProps={{
  style: styles.dayPickerInput,
  onChange: event => dateChanged(event.target.value),
}}

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

于 2020-04-08T19:13:39.460 回答