如何检测React/MaterialUI Autocomplete组件点击已选中选项的事件

Material UI的Autocomplete组件默认onChange事件仅在选中值与当前已选值不一致时触发，因此重复选中同一选项时不会触发该事件，可通过自定义选项渲染的方式捕获所有选项点击事件，实现需求：

<Autocomplete
    id="combo-box-demo"
    options={this.state.items}
    onChange={this.onChangeFired.bind(this)}
    getOptionLabel={(option) => option.name}
    style={{ width: 300 }}
    renderInput={(params) => (
        <TextField {...params} label="Products" variant="outlined" />
    )}
    {/* 新增renderOption自定义选项渲染 */}
    renderOption={(props, option, { selected }) => (
        <li 
            {...props}
            onClick={(e) => {
                // 保留原有默认点击逻辑，不破坏组件原有选择功能
                props.onClick?.(e);
                // 在这里添加你需要执行的自定义逻辑，无论是否重复选中都会触发
                console.log('选中了选项：', option.name);
                // 类组件可调用你自己的方法，例如：
                // this.onOptionClicked(option);
            }}
        >
            {option.name}
        </li>
    )}
/>

• 该方案不会破坏Autocomplete组件的原有功能，默认的选中、高亮、关闭下拉框等逻辑都可以正常运行
• 如果你需要区分首次选中和重复选中的场景，可以通过selected参数判断当前点击的选项是否为已选中状态，自行处理不同分支逻辑

内容的提问来源于stack exchange，提问作者sami