如何从 HOC 更改 React-Bootstrap-Typeahead 的选定值

Question

我有两个 Typeahead (react-bootstrap-typeahead) 组件，我想在按下按钮时反转选定的值。以状态存储的数据正确变化。但我无法将更改的选择设置为 Typeahead 的值。

使用selected prop 设置选定对象但出现一些错误：

Warning: [react-bootstrap-typeahead] `defaultInputValue` will be overridden by the value from `selected`.

Warning: Failed prop type: Invalid prop `selected` supplied to `TypeaheadContainer(WrappedTypeahead)`.

我的 HOC

<TypeaheadComponent
    onSearch={value => getOriginPlaces(value, index)}
    data={route.originResults}
    onInputChange={value => originPlaceInputOnChange(value, index)}
    onSelect={item => originPlaceOnSelect(item, index)}
    selected={route.originPlace} // object
    inputValue={route.originPlaceInputValue} // string from  originPlaceInputOnChange()
/>

和 AsyncTypeahead (react-bootstrap-typeahead)

<AsyncTypeahead
    promptText={<PromptText />}
    searchText={<Loading />}
    emptyLabel={<NotFound />}
    inputProps={{...}}
    options={props.data}
    maxResults={10}
    paginationText={...}
    labelKey="name"
    filterBy={[...]}
    onSearch={props.onSearch}
    minLength={2}
    selectHintOnEnter={true}
    onInputChange={props.onInputChange}
    onChange={selected => props.onSelect(selected[0])} // set first object of array
    defaultInputValue={props.inputValue || ''}
    selected={props.selected} // object
    renderMenu={...}
/>

我该怎么做？或者我哪里错了

Answer 1

您的主要问题是 selected 需要是一个数组，而不是一个对象。尝试将包含选择的数组（例如：[props.selected]）传递给 AsyncTypeahead。应该可以的。

对于第二个警告，defaultInputValue 将仅在 typeahead 最初装载（而不是后续渲染）时设置输入值，并且从selected 派生的任何输入值都将优先。