Material UI自动完成删除芯片不工作

Question

我正在尝试使用Material UI实现自动建议。当我使用芯片上的自定义svg作为deleteIcon时，onDelete不起作用。

import React, {useState, useEffect} from 'react';
import { SvgIcon } from '@material-ui/core';
import Chip from '@material-ui/core/Chip';
import Autocomplete from '@material-ui/lab/Autocomplete';
import TextField from '@material-ui/core/TextField';
const MySVGComponent = () => {
return (
<SvgIcon className="customClose" viewBox='0 0 11 11'>
<svg className="MuiSvgIcon-root MuiChip-deleteIcon" width="8" height="8" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.82831 8.82837L3.17145 3.17151" stroke="#808080"></path>
<path d="M3.17145 8.82837L8.8283 3.17152" stroke="#808080"></path>
</svg>
</SvgIcon>
)
}
const labels = [{labelName: 'Important'}, {labelName: 'Confidential'}, {labelName: 'Urgent'}]
const MyAutoCompleteComponent = () => {
return (
<Autocomplete
multiple
renderTags={(tagValue, getTagProps) =>
tagValue.map((option, index) => (
<Chip
onDelete={() => console.log('You Deleted this icon')}
deleteIcon={<MySVGComponent />}
label={option.labelName}
{...getTagProps({ index })}
style={{
backgroundColor: label === 'Confidential' ? 'red' : 'green'
}}
/>
))
}
freeSolo
tabIndex={1}
disableClearable
options={labels}
getOptionLabel={option => option.labelName}
onChange={onLablesChange}
renderInput={params => (
<TextField
{...params}
variant="standard"
label="Labels"
margin="normal"
fullWidth
/>
)}
/>
)
}
export default MyAutoCompleteComponent

Answer 1

您需要向自定义SvgIcon:添加道具

const MySVGComponent = (props) => {
return (
<SvgIcon className="customClose" viewBox='0 0 11 11' {...props}>
<svg className="MuiSvgIcon-root MuiChip-deleteIcon" width="8" height="8" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8.82831 8.82837L3.17145 3.17151" stroke="#808080"></path>
<path d="M3.17145 8.82837L8.8283 3.17152" stroke="#808080"></path>
</svg>
</SvgIcon>
)
}