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仅在最初装入预输入时设置输入值（而不是后续渲染），并且从selected派生的任何输入值都将优先。

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

1 个答案: