时间戳

首页 > 解决方案 > React Material-UI 自动完成。如何获得已删除选项的价值？

reactjs - React Material-UI 自动完成。如何获得已删除选项的价值？

问题描述

我有一个Autocomplete multiple select元素。当我单击交叉时，要删除某些选项，我想获得这个值。我尝试使用ChipProps = {{onDelete: some function}}但没有用:(我得到undefined了，而且更重要的是，删除功能完全停止工作。这是我的代码

const top100Films = [
    { title: 'The Shawshank Redemption', year: 1994 },
    { title: 'The Godfather', year: 1972 },
    { title: 'The Godfather: Part II', year: 1974 },
    { title: 'The Dark Knight', year: 2008 },
    { title: '12 Angry Men', year: 1957 },
    { title: "Schindler's List", year: 1993 },
];

<Autocomplete
    multiple
    id="tags-standard1"
    options={top100Films}
    getOptionLabel={(option) => option.title}
    //ChipProps = {{onDelete: (option) => {console.log(option.title)}}} 
    renderInput={(params) => (
        <TextField
            {...params}
            size="small"
            variant="outlined"
            label="Films"
        />
    )}
/>

那么有人能告诉我如何获取已删除选项的 ID 或值吗？

标签： reactjsmaterial-ui

解决方案

从这个 MR 开始：https ://github.com/mui-org/material-ui/pull/19959/files ，如果你需要整个移除的对象，你可以使用第四个参数。例如：

onChange={(event, list, reason, detail) => {
          if (reason === 'remove-option') {
              console.log(detail.option);
            };
          })

推荐阅读