材质 UI 自动完成

【问题标题】：Material UI Autocomplete材质 UI 自动完成
【发布时间】：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
        />
      )}
    />

【问题讨论】：

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

标签： reactjs material-ui

【解决方案1】：

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

{...getTagProps({ index })}

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

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

【讨论】：