Material-UI 使用活动的 getOptionSelected 自动完成清除值

Question

我有一个由 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()
    }
}

它清除了我的值，但问题是它在找不到 id:

的 getOptionsSelected 道具上抛出 undefined 错误

我怎样才能清除我的价值观？

感谢您的宝贵时间！

Answer 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 提供的清除按钮操作和按下退格键时删除整个选定选项的操作都非常有效

Material-UI 使用活动的 getOptionSelected 自动完成清除值

Material-UI Autocomplete clear value with active getOptionSelected

reactjs

autocomplete

material-ui

解决方案