材质 UI 自动完成

Posted 2023-02-22

【中文标题】材质 UI 自动完成

【英文标题】：Material UI Autocomplete

【发布时间】：2020-04-09 08:55:06

【问题描述】：

我正在使用 Material UI 的自动完成功能构建一个表单。该字段呈现芯片，但是我无法修改芯片组件的 onDelete 属性。我曾尝试修改其他道具，例如变体、标签等，但即使尝试让 onDelete 道具做一个简单的控制台日志也不起作用。我的代码如下。

        <Autocomplete
      onChange=handleRecChange("foodRecs")
      multiple
      options=menuItems
      renderTags=(value, getTagProps) =>
        value.map((option, index) => (
          <Chip
            variant="outlined"
            key=option
            label=option
            onDelete=() => console.log("test")
            ...getTagProps( index )
          />
        ))
      
      renderInput=params => (
        <TextField
          ...params
          variant="standard"
          label="Recommendations"
          placeholder="Choose anything from the menu"
          fullWidth
        />
      )
    />

【问题讨论】：

你如何捕捉用户的选择？我无法弄清楚如何访问自动完成的实际选定值...

【参考方案1】：

那是因为你在这一行覆盖了onDelete：

...getTagProps( index )

getTagProps 是标签道具的吸气剂。它包括onDelete 函数，因为onDelete 是Chip 属性（您可以打印getTagProps 返回值来查看）。 您应该将getTagProps 放在第一行，以避免不必要的道具覆盖：

  <Chip
    ...getTagProps( index )
    variant="outlined"
    key=option
    label=option
    onDelete=() => console.log("test")
  />