问题描述
我复制了自动完成的“自动完成材料”,我想在用户选择项目时调用一个函数,除了 出现的新标签。 我写了“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>
);
}
解决方法
暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!
如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@)