Как изменить выбранное значение React-Bootstrap-Typeahead из HOC - PullRequest
Новая
       8

Как изменить выбранное значение React-Bootstrap-Typeahead из HOC

1 голос
/ 23 июня 2019

У меня есть два компонента Typeahead (response-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 (тип реакции-начальной загрузки) 

<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={...}
/>

Как я могу это сделать? Или где я не прав

1 Ответ

1 голос
/ 26 июня 2019

Ваша главная проблема в том, что selected должен быть массивом, а не объектом. Попробуйте передать массив, содержащий выделение (например: [props.selected]), в AsyncTypeahead. Это должно сработать.

Для второго предупреждения, defaultInputValue будет устанавливать входное значение только тогда, когда заголовок typeahead первоначально монтируется (не последующие рендеры), и любое входное значение, полученное из selected, будет иметь приоритет.

...