如何向 Material UI 自动完成中的清除按钮图标添加/编辑功能？

Question

我有下面的代码

                   <Autocomplete
                        id='combo-box-demo'
                        options={companies}
                        getOptionLabel={getOptionLabel}
                        renderInput={params => (
                            <TextField {...params} variant='outlined' />
                        )}
                        onChange={(event, newValue) => onCompanyChange(event, newValue)}
                    />

当我单击自动完成输入中的清除按钮时，我想自定义该功能。我需要询问用户是否真的想先清除该字段。是否可以以 .MuiAutocomplete-clearIndicator 为目标，以便我可以在其上添加更多功能？谢谢提前！

Answer 1

const onCompanyChange = (event, value, reason) => {
 if(reason === "clear")
    confirm("Are you sure to clear?"); // or you can open Dialog here
 
 //other codes go here like setting the value of input
};

<Autocomplete
             id='combo-box-demo'
             options={companies}
             getOptionLabel={getOptionLabel}
             renderInput={params => (
                           <TextField {...params} variant='outlined' />
                         )}
             onChange={onCompanyChange}
             />