具有活动 getOptionSelected 的 Material-UI 自动完成清除值答案

【问题标题】：Material-UI Autocomplete clear value with active getOptionSelected具有活动 getOptionSelected 的 Material-UI 自动完成清除值
【发布时间】：2021-09-14 06:27:51
【问题描述】：

我有一个 Material-UI 提供的自动完成组件：

这是代码：

                    <Autocomplete
                        onFocus={() => setFocusedProject(true)}
                        onBlur={() => setFocusedProject(false)}
                        onKeyDown={deleteProject}
                        className={classes.generalField}
                        id="checkboxes-tags-demo"
                        disableClearable
                        options={projects}
                        value={consistenceProject}
                        onChange={handleProjectChange}
                        getOptionSelected={(option) => option.id === consistenceProject.id}
                        getOptionLabel={(option) => (option.projectName + " - " + option.clientName)}
                        renderInput={(params) => (
                            <TextField
                                {...params}
                                error={projectError === "" ? false : true}
                                helperText={projectError}
                                variant="outlined"
                                label={i18n.t("worklogModal.project")} />
                        )}
                        renderOption={(option, { selected }) => (
                            <React.Fragment>
                                <Radio
                                    color={Colors.firstColor}
                                    className={classes.radioButton}
                                    style={{ marginRight: 8 }}
                                    checked={selected}
                                />
                                {option.projectName}
                            </React.Fragment>
                        )}
                    />

这是onChange function：

 const handleProjectChange = (event, newValue) => {
        if (newValue != null) {
            setProjectValue(newValue.id)
            setConsistenceProject(newValue)
            !id && sessionStorage.setItem('worklogConsistenceProject', JSON.stringify(newValue))
            !id && sessionStorage.setItem("worklogProject", JSON.stringify([newValue.id]))
        }
    }

我想如果用户按下backspace button 来清除组件。这是我的功能：

const deleteProject = (event) => {
    if (projectValue && focusedProject && event.keyCode === 8) {
            sessionStorage.removeItem('worklogConsistenceUser')
            sessionStorage.removeItem('worklogProject')
            setProjectValue()
            setConsistenceProject()
    }
}

它清除了我的值，但问题是它在 getOptionsSelected 上抛出了一个 undefined 错误，它找不到 id：

如何清除我的价值观？

感谢您的宝贵时间！

【问题讨论】：

标签： reactjs autocomplete material-ui

【解决方案1】：

解决方案

可能听起来很菜鸟，但我将handleProjectChange 更改为：

const handleProjectChange = (event, newValue) => {
    setProjectValue(newValue ? newValue.id : null)
    setConsistenceProject(newValue)
    !id && sessionStorage.setItem('worklogConsistenceProject', JSON.stringify(newValue))
    !id && sessionStorage.setItem("worklogProject", JSON.stringify(newValue ? [newValue.id] : null))
}

还有getOptionsSelected 支持：

getOptionSelected={(option) => consistenceProject && option.id === consistenceProject.id}

它适用于 Material-UI 提供的清除按钮操作和我在按下退格键时删除整个选定选项的操作

【讨论】：