如何在反应中自动完成材料的组合框中当前行上按下猎人键时召唤和激活“onchange”事件

如何解决如何在反应中自动完成材料的组合框中当前行上按下猎人键时召唤和激活“onchange”事件

我复制了自动完成的“自动完成材料”，我想在用户选择项目时调用一个函数，除了 出现的新标签。 我写了“onChange”函数，在这里： 我在'//1'中叹了口气。

但我的大问题是： 当用户通过单击鼠标选择复选框时发生该事件， 但是当用户按下 'enter' 这不会发生。

（添加了新标签，但不是我在“onChange”函数上定义的事件...）

here is running browser screenshot picture

import { React,useState,Component,useEffect,useRef } from 'react';
import CheckBox from '@material-ui/core/CheckBox';
import TextField from '@material-ui/core/TextField';
import Autocomplete from '@material-ui/lab/Autocomplete';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
import CheckBoxIcon from '@material-ui/icons/CheckBox';
import { ArrowLeftRounded } from '@material-ui/icons';

const icon = <CheckBoxOutlineBlankIcon fontSize="small" />;
const checkedIcon = <CheckBoxIcon fontSize="small" />;


export default function CheckBoxesTags() {
    
function fillComboBox() {

       // here post ajax to fill the comboBox
    }
    const [tagsArray,setTagsArray] = useState([]);

    useEffect(function () {
        fillComboBox();
        return function a() {
            alert(" bye bye ");
        }
    },[])

   
    return (
        <div id="a">
            <Autocomplete
                multiple

                 //here is the onChange function,the code enter this,when the user choose the  
                 //checkBox by clicking the mouse,but when the user press 'enter' this does'nt happan
//1
                onChange={ (e) => {
                   alert(" I Succeeded to enter onchange" );  
                                  }
                         }



                id="checkBoxes-tags-demo"
                options={tagsArray}

                disableCloSEOnSelect
                getoptionLabel={(option) => option.tagName}
                renderOption={(option,{ selected }) => (
                      <input
                             type="CheckBox"
                             icon={icon}
                             checkedIcon={checkedIcon}
                             style={{ marginRight: 20 }}
                             checked={selected}

                      />
                 <div> 
                     <CheckBox>
                        icon={icon}
                        checkedIcon={checkedIcon}
                        style={{ marginRight: 20 }}
                        checked={selected}
                     </CheckBox>
                       {option.tagName}
                </div>
                )}
                style={{ width:1000 }}

                renderInput={(params) => (
                <TextField {...params} variant="outlined" label="CheckBoxes" placeholder="Favorites" />

            )}
            />
            <CheckBox>e</CheckBox>
        </div>
    );
}