reactjs - 反应材料 ui multiSelect onclose 事件不起作用
问题描述
import React from 'react';
import clsx from 'clsx';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import Input from '@material-ui/core/Input';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import ListItemText from '@material-ui/core/ListItemText';
import Select from '@material-ui/core/Select';
import Checkbox from '@material-ui/core/Checkbox';
import Chip from '@material-ui/core/Chip';
const useStyles = makeStyles((theme) => ({
formControl: {
margin: theme.spacing(1),
minWidth: 120,
maxWidth: 300,
},
chips: {
display: 'flex',
flexWrap: 'wrap',
},
chip: {
margin: 2,
},
noLabel: {
marginTop: theme.spacing(3),
},
}));
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
const names = [
'Oliver Hansen',
'Van Henry',
'April Tucker',
'Ralph Hubbard',
'Omar Alexander',
'Carlos Abbott',
'Miriam Wagner',
'Bradley Wilkerson',
'Virginia Andrews',
'Kelly Snyder',
];
function getStyles(name, personName, theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
export default function MultipleSelect() {
const classes = useStyles();
const theme = useTheme();
const [personName, setPersonName] = React.useState([]);
const handleChange = (event) => {
setPersonName(event.target.value);
};
const handleChangeMultiple = (event) => {
const { options } = event.target;
const value = [];
for (let i = 0, l = options.length; i < l; i += 1) {
if (options[i].selected) {
value.push(options[i].value);
}
}
setPersonName(value);
};
return (
<div>
<FormControl className={classes.formControl}>
<InputLabel id="demo-mutiple-name-label">Name</InputLabel>
<Select
labelId="demo-mutiple-name-label"
id="demo-mutiple-name"
multiple
value={personName}
onChange={handleChange}
input={<Input />}
MenuProps={MenuProps}
>
{names.map((name) => (
<MenuItem key={name} value={name} style={getStyles(name, personName, theme)}>
{name}
</MenuItem>
))}
</Select>
</FormControl>
</div>
);
}
一旦从 MenuItem 中选择了一项,我想关闭反应 MultiSelect 菜单。我尝试在侧面使用 onClose 事件句柄,但它对我不起作用,但它会不断改变状态。所以请任何人都可以通过编程方式解决这个 onclose 事件。提供的代码片段不起作用。谢谢
解决方案
推荐阅读
- python - 从python shell调用存储在mongodb中system.js集合中的函数
- c# - C# ASP.NET MVC 5 ViewModel 问题
- c# - PDF剪切矩形及其包含并添加到新的PDF文件IText
- javascript - 单击时如何获取表格相应单元格的值
- python - 使用数组匹配多列
- angular - 来自猫鼬模式的角度接口
- node.js - 无法从亚马逊获取访问令牌
- tcp - 在 Tokio 中使用 TcpStream 读取分段的 TCP 数据包
- wordpress - 在多语言网站中切换页脚
- javascript - 在 JavaScript 中解析非标准 JSON