React Material-UI 芯片在 Select 內的 onDelete 不工作

Question

我在這里按照 Chips 示例進行操作，以便將 chips 渲染為 Select 的 renderValue：

https://material-ui.com/components/selects/

但是，當我給芯片加上onDelete時，為了一鍵刪除芯片，可以看到關閉圖標，但是沒有調用刪除事件（因為顯示Select的菜單）。

 <Select multiple value={selectedProducts} onChange={handleProductsSearchChange} renderValue={selected => ( <div className={classes.chips}> {selected.map(value => ( <Chip key={value} label={find(FAKE_PRODUCTS, {id: value}).name} onDelete={() => handleDeleteSearchProduct(value)} className={classes.chip} /> ))} </div>)} MenuProps={{ PaperProps: { style: { maxHeight: 48 * 4.5 + 8, width: 250, } } }} > {menuItems} </Select>

當我將芯片放在 select 之外時，會調用 delete 事件。 您認為我可以做些什么來防止單擊時打開菜單的行為？

非常感謝你！

Answer 1

Select組件攔截mousedown事件，所以添加

onMouseDown={(event) => {
  event.stopPropagation();
}}

到您的Chip組件。

Answer 2

是的，它有效，停止在芯片組件中傳播

onMouseDown={(event) => {
 event.stopPropagation();
}}

為了繼續關注 select 可以創建一個引用selectRef = React.createRef(); 並調用selectRef.current.focus(); 它將焦點重置到組件