集成 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 存储。