整合 react-redux、react-final-form 和 react-bootstrap-typeahead

Question

我正在尝试设置 react-boostrap-typeahead 以从 redux 存储中获取数据，并使用 react-final-form 存储预输入状态。 问题是 react-bootstrap-typeahead 附加了不止一个状态，这两个状态都需要跟踪才能使此设置正常工作。

1. 文本输入状态
2. 选择的选项

我解决这个问题的首选方法涉及 final-form-set-field-data 并在此处说明： https://codesandbox.io/s/rl81o5765o

该代码将无法正常工作，因为 Form 组件不知道字段数据的更改。 有没有更好的方法来解决这个问题？

Answer 1

我想出了一个解决办法：

https://codesandbox.io/s/5m4w2909k

方法是引入一个 withKeyword HoC，它利用 final-form-set-field-data 向字段中注入 keyword 和 updateKeyword 道具。 Typeahead 必须单独连接到 redux 商店。