Автозаполнение в компоненте Popover с задержкой поиска - PullRequest
Новая
       45

Автозаполнение в компоненте Popover с задержкой поиска

1 голос
/ 25 февраля 2020

У меня проблема с сохранением состояния поискового запроса.

While typing

Console while typing

Когда поповер попадает в фокус, searchString начинается с неопределенного (второе неопределенное значение на рисунке). Когда клавиша «b» нажата, событие запускается, и оно устанавливает значение «» (инициализированное значение). Как показано, когда «bart» находится в поисковом запросе, консоль регистрирует только «bar». Кто-нибудь знает, почему происходит такое поведение? Конечная цель заключается в том, что я пытаюсь сохранить строку поиска при выделении (она исчезает при нажатии) -> была бы признательна за любую помощь в этом. Основной блок кода, в котором происходят эти изменения: 

                <Autocomplete
                    open
                    onClose={handleClose}
                    multiple
                    classes={{
                        paper: classes.paper,
                        option: classes.option,
                        popperDisablePortal: classes.popperDisablePortal,
                    }}
                    value={pendingValue}
                    onChange={(event, newValue) => {
                        setPendingValue(newValue);
                    }}
                    // inputValue={searchString}
                    // onInputChange={(event, newValue) => {
                    //     setSearchString(newValue);
                    // }}
                    disableCloseOnSelect
                    disablePortal
                    renderTags={() => null}
                    noOptionsText="No values"
                    renderOption={(option, { selected }) => (
                        <React.Fragment>
                            <DoneIcon
                                className={classes.iconSelected}
                                style={{ visibility: selected ? 'visible' : 'hidden' }}
                            />
                            <div className={classes.text}>
                                {option.value}
                            </div>
                        </React.Fragment>
                    )}
                    options={[...suggestions].sort((a, b) => {
                        // Display the selected labels first.
                        let ai = selectedValue.indexOf(a);
                        ai = ai === -1 ? selectedValue.length + suggestions.indexOf(a) : ai;
                        let bi = selectedValue.indexOf(b);
                        bi = bi === -1 ? selectedValue.length + suggestions.indexOf(b) : bi;
                        return ai - bi;
                    })}
                    getOptionLabel={option => option.value}
                    renderInput={params => (
                        <InputBase
                            ref={params.InputProps.ref}
                            inputProps={params.inputProps}
                            autoFocus
                            className={classes.inputBase}
                            // onChange={(event) => {
                            //     console.log("event.target: ", event.target);
                            //     console.log("event.currentTarget: ", event.currentTarget);
                            //     setSearchString(event.currentTarget);
                            // }}
                            value={searchString}
                            onChange={handleInputChange}
                        />
                    )}
                />

Я попытался сохранить значение и заново заполнить его, используя как реквизиты автозаполнения, так и InputBase (выполнение этого в обоих случаях приводит к взлому sh). Я добавил песочницу для вашей ссылки: CodeSandbox

Цените всю помощь!

1 Ответ

2 голосов
/ 25 февраля 2020

Материал автозаполнения пользовательского интерфейса автоматически сбрасывает значение поиска каждый раз, когда вы выбираете опцию. Если вы хотите обойти это, используйте useAutocomplete ловушку для точной настройки компонента в соответствии с вашими потребностями.

Что касается отложенных значений в журнале консоли, вы устанавливаете новое значение, а затем ведете журналы консоли. старое значение Очевидно, что это напечатает старое значение, что еще вы ожидали?

Ваш код должен был выглядеть следующим образом 


    const handleInputChange = event => {
        // new value => event.currentTarget.value
        // old value => searchString
        // these values never mutate throughout this function call

        setSearchString(event.currentTarget.value);

        // searchString still remains the same here and 
        // won't change even if you call setState
        // it remains the same throughout this entire function call
        // Since Mutation is not allowed in Functional Programming
        // This is perhaps why Functional Programming is 
        // far better than Object Oriented Programming ?

        console.log('searchString: ', event.currentTarget.value);
    }

Однако это неправильный способ наблюдать за изменениями состояния. Лучше было бы что-то вроде этого, 


// This will be called whenever React
// observes a change in anyState

useEffect(() => {
  console.log(anyState)
}, [anyState])
...