具有搜索权限的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通过设计自动完成重新设置搜索值。如果您想通过传递它，使用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])