Question

我正在尝试使用Material UI实施Autosuggest。当我使用芯片上的自定义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>
    )
}

物料UI自动完成芯片onDelete无法正常工作

1 个答案: