Uso el componente Ant-design Select / Custom menú desplegable ( https://codesandbox.io/s/759185?file=/demo.js ) pero no tiene una función para eliminar un elemento de un menú desplegable especial y si agrega un botón para cada opción de elemento, cuando hace clic en él, se cierra el elemento Seleccionar . ¿Quién se enfrentó a tal problema?
El truco aquí es usar event.stopPropagation() que simplemente detendrá el burbujeo de eventos a elementos HTML que están más arriba en la jerarquía.
El controlador de eliminación que detiene la propagación.
const deleteItem = (e, index) => { e.stopPropagation(); e.preventDefault(); const updated = [...items]; updated.splice(index, 1); setItems(updated); };Todo el código con un botón que elimina un elemento de un menú desplegable.
import React from "react"; import "antd/dist/antd.css"; import "./index.css"; import { PlusOutlined } from "@ant-design/icons"; import { Divider, Input, Select, Space, Typography, Button } from "antd"; import { useState } from "react"; const { Option } = Select; let index = 0; const App = () => { const [items, setItems] = useState(["jack", "lucy"]); const [name, setName] = useState(""); const onNameChange = (event) => { setName(event.target.value); }; const addItem = (e) => { e.preventDefault(); setItems([...items, name || `New item ${index++}`]); setName(""); }; const deleteItem = (e, index) => { e.stopPropagation(); e.preventDefault(); const updated = [...items]; updated.splice(index, 1); setItems(updated); }; return ( <Select style={{ width: 300 }} placeholder="custom dropdown render" dropdownRender={(menu) => ( <> {menu} <Divider style={{ margin: "8px 0" }} /> <Space align="center" style={{ padding: "0 8px 4px" }} > <Input placeholder="Please enter item" value={name} onChange={onNameChange} /> <Typography.Link onClick={addItem} style={{ whiteSpace: "nowrap" }} > <PlusOutlined /> Add item </Typography.Link> </Space> </> )} > {items.map((item, index) => ( <Option key={item}> <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }} > <div>{item}</div> <Button onClick={(e) => deleteItem(e, index)} danger size="small"> Delete </Button> </div> </Option> ))} </Select> ); }; export default App;