具有搜索保留功能的 Popover 组件中的自动完成

Question

我在保存搜索查询状态时遇到问题。

当弹出窗口成为焦点时，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 来存储值并重新填充它（在两者上都这样做会导致它崩溃）。我已经为您的参考添加了一个沙箱：CodeSandbox

感谢所有帮助！

Answer 1

Material UI 自动完成设计会在您每次 select 一个选项时重置搜索值。如果你想绕过它，使用 useAutocomplete hook 根据你的需要微调组件。

至于延迟的控制台日志值，您正在设置新值，然后控制台记录旧值。很明显它会打印旧值，你还期望什么？

你的代码应该是这样的


    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])

具有搜索保留功能的 Popover 组件中的自动完成

Autocomplete in Popover Component with search rentention

javascript

autocomplete

reactjs

material-ui

react-props