Material UI Autocomplete Chip onDelete 不工作答案

【问题标题】：Material UI Autocomplete Chip onDelete Not WorkingMaterial UI Autocomplete Chip onDelete 不工作
【发布时间】：2020-07-10 21:21:16
【问题描述】：

我正在尝试使用 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

【问题讨论】：

标签： reactjs material-ui

【解决方案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>
    )
}

【讨论】：

你能解释一下原因吗？