Material UI Autocomplete

Question

我正在使用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
        />
      )}
    />

Answer 1

这是因为您在此行中覆盖了onDelete：

{...getTagProps({ index })}

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

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