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

Question

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

当弹出框成为焦点时，searchString 以 undefined（图片中的第二个未定义值）开头。当按下键 '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}
                        />
                    )}
                />

我尝试存储该值并通过 Autocomplete 道具和 InputBase 重新填充它（在两者上执行它会导致它崩溃）。我为您的参考添加了一个沙箱：CodeSandbox

感谢所有帮助！

Answer 1

每次选择选项时，Material UI 自动完成功能都会重置搜索值。如果你想绕过它，使用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])