javascript - 使用Material UI访问renderValueValue组件上的React事件处理程序时出现问题

我试图使用以下代码片段中的Material UI访问onDelete组件中的chip事件处理程序。

当我单击chip时，会发生Select行为（打开一个下拉列表）。

有什么方法可以覆盖此行为，以便我也可以删除筹码吗？

在代码沙箱上的此处演示：https://codesandbox.io/s/purple-thunder-s0isr

<Select
  labelId="demo-mutiple-chip-label"
  id="demo-mutiple-chip"
  key=""
  multiple
  value={["Fred", "Tom"]}]
  input={<Input id="select-multiple-chips" />}
  renderValue={() =>
    ["Fred", "Tom"].map((name) => (
      <Chip
        label={name}
        key={name}
        onDelete={() => {
          console.log("Delete clicked")
        }}
      />
    ))
  }
></Select>

最佳答案

参见示例：

import React, {useState} from "react";
import ReactDOM from "react-dom";
import { Select, Chip, Input, MenuItem } from "@material-ui/core";

import "./styles.css";

function App() {

  const [chipData, setChipData] = React.useState([
    { key: 0, label: 'A' },
    { key: 1, label: 'B' },
    { key: 2, label: 'C' },
    { key: 3, label: 'D' },
    { key: 4, label: 'E' }
  ]);

  const [selectedChips, setSelectedChips] = React.useState([]);
  const [chipName, setChipName] = React.useState([]);
  const [canOpen, setCanOpen] = React.useState(false);

  const handleDelete = chipToDelete => () => {
    let s = selectedChips.filter(chip => chip.key !== chipToDelete.key);
    setSelectedChips(s);
    setChipName(s);
  };

  const selectHandleOnOpen = event =>{
    setCanOpen(!canOpen);
  }

  const handleChange = event => {
    setChipName(event.target.value);
    setSelectedChips(event.target.value);
  };


  return (

    <Select
      style={{width: "300px"}}
      labelId="demo-mutiple-chip-label"
      id="demo-mutiple-chip"
      multiple
      onChange={handleChange}
      value={chipName}
      onClick={selectHandleOnOpen}
      open={canOpen}
      renderValue={selected =>
        selectedChips.map(item => (
          <Chip
            clickable={true}
            label={item.label}
            key={item.key}
            onDelete={handleDelete(item)}
            style={{margin: "5px"}}
          />

        ))
      }

    >
      {chipData.map(item => (
            <MenuItem key={'MenuItem-'+item.key} value={item} >
              {item.label}
            </MenuItem>
          ))}
      </Select>

  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

在此处查看示例输出：https://codesandbox.io/s/flamboyant-saha-felni