如何在自动完成中设置 onDelete 道具？

Question

由于在 ChipProps 中调用了 handleDelete 函数，我想删除筹码，但它似乎无法获取 event.target.value...我该怎么办？

const handleDelete = (event) => 
{
  console.log(event.target);  // here I get undefined
}

<AutoComplete
  multiple
  id="checkboxes-options"
  debug
  options={newData.map((item) => item.name)}
  ChipProps={{ clickable: false, onDelete: handleDelete, variant: "outlined", color: "primary" }}
  disableCloseOnSelect
  disableClearable
  value={newData}
  tag={{ color: "primary" }}
  renderOption={(options, { selected }) =>
   <Aux>
     <FormControlLabel
     control={
       <Checkbox
         icon={icon}
         checkedIcon={checkedIcon}
         style={{ marginRight: 20 }}
         value={options}
         name={options === newData ? "isChecked" : "isUnchecked"}
         color='primary'
         checked={options === newData ? state.isChecked : selected}
         onChange={updateNewData}
        />
      }
    />
    {options}
/>

Answer 1

向自动完成组件的 renderTags 道具添加渲染函数。在您的 renderTags 方法中，您不仅可以更改标签，还可以覆盖 onDelete 函数。

<Autocomplete
  ...
  renderTags={(values) =>
    values.map((value) => (
      <Chip
        key={value.id}
        label={value.title}
        onDelete={() => {
          removeOption(value.id);
        }}
      />
    ))
  }
/>

这里是对类似问题的引用，其中也有一个演示：

如何在自动完成中设置 onDelete 道具？

How can I set onDelete prop in autocomplete?

reactjs

autocomplete

material-ui