Javascript 物料界面中的可删除芯片多选

Material UI文档包括一个示例，其中通过使用Select上的renderValue属性，使用芯片组件呈现选定选项。选择组件的标准行为是单击当前值打开选项列表

我正试图调整它，使芯片显示X按钮，点击X应该立即从选择中删除该项目，而不是打开选项列表

这似乎很容易，但我无法启动芯片的onDelete事件。单击X仍然只是打开“选择”

如何使onDelete事件具有优先级？从我对事件冒泡的了解来看，似乎芯片应该首先处理事件

代码：

选择的打开由-而不是单击事件触发

当鼠标按下事件发生在芯片的删除图标上时，您可以通过停止鼠标按下事件的传播来获得所需的行为：

const MultipleSelectDemo = () => {
  const [personName, setPersonName] = React.useState<string[]>(initialSelected);

  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setPersonName(event.target.value as string[]);
  };
  
  // this never gets called
  const handleDelete = (e: React.MouseEvent, value: string) => {
    e.preventDefault();
    console.log("clicked delete");
    setPersonName((current) => _without(current, value));
  };

  return (
      <div>
        <FormControl>
          <InputLabel id="demo-mutiple-chip-checkbox-label">
            Chip + Check
          </InputLabel>
          <Select
            labelId="demo-mutiple-chip-checkbox-label"
            id="demo-mutiple-chip-checkbox"
            multiple
            value={personName}
            onChange={handleChange}
            onOpen={() => console.log("select opened")}
            IconComponent={KeyboardArrowDownIcon}
            renderValue={(selected) => (
              <div>
                {(selected as string[]).map((value) => (
                  <Chip
                    key={value}
                    label={value}
                    clickable
                    className={classes.chip}
                    onDelete={(e) => handleDelete(e, value)}
                    onClick={() => console.log("clicked chip")}
                  />
                ))}
              </div>
            )}
          >
            {names.map((name) => (
              <MenuItem key={name} value={name}>
                <Checkbox checked={personName.includes(name)} />
                <ListItemText primary={name} />
              </MenuItem>
            ))}
          </Select>
        </FormControl>
      </div>
  );
}

                  <Chip
                    key={value}
                    label={value}
                    clickable
                    deleteIcon={
                      <CancelIcon
                        onMouseDown={(event) => event.stopPropagation()}
                      />
                    }
                    className={classes.chip}
                    onDelete={(e) => handleDelete(e, value)}
                    onClick={() => console.log("clicked chip")}
                  />