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

Question

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

使用selected属性设置选定的对象，但得到一些错误：

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派生的任何输入值将优先。