React JS material-ui itemlist 对话框没有关闭

Question

我正在用材料 ui 和反应制作待办事项列表。 我有一个问题。 我尝试制作单击事件，该事件在单击列表项时打开一个包含详细信息的对话框。 但是，当我尝试关闭对话框时，对话框不会关闭。 这是我为测试编写的代码。

import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import Checkbox from '@material-ui/core/Checkbox';
import DeleteIcon from '@material-ui/icons/Delete';
import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
import ConfirmationNumberIcon from '@material-ui/icons/ConfirmationNumber';
import DialogTitle from '@material-ui/core/DialogTitle';
import DialogContentText from '@material-ui/core/DialogContentText';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import { QuestItem } from '../common/interfaces';
interface IProps {
quest: QuestItem | null
}

export default function QuestEntry({ quest } : IProps) {
const [checked, setChecked] = React.useState(quest?.checked);
const [questopen, setQuestOpen] = React.useState(false);
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked);
};
const handleClickOpen = () => {
setQuestOpen(true);
};
const handleClose = () => {
console.log("click");
setQuestOpen(false);
};
return (
<ListItem button onClick={handleClickOpen}>
<ListItemAvatar>
<Avatar>
<KeyboardArrowDownIcon />
</Avatar>
</ListItemAvatar>
<ListItemText
primary={quest?.title}
/>
<ListItemSecondaryAction>
<Checkbox
edge="end"
checked={checked}
onChange={handleChange}
/>
{checked && (
<IconButton edge="end" aria-label="delete">
<ConfirmationNumberIcon />
</IconButton>
)}
{!checked && (
<IconButton edge="end" aria-label="delete">
<DeleteIcon />
</IconButton>
)}
</ListItemSecondaryAction>
<Dialog open={questopen} onClose={handleClose} aria-labelledby="form-dialog-title">
<DialogTitle id="form-dialog-title">Quest Info</DialogTitle>
{/* <DialogContent>
</DialogContent> */}
<DialogActions>
<Button onClick={handleClose} color="primary">
Close
</Button>
</DialogActions>
</Dialog>
</ListItem>
);
}

我认为鼠标焦点在对话框上之间存在联系。但是我无法从谷歌搜索中找到任何解决方案，请帮助我！！

Answer 1

只要您单击页面上的任何项目，就会触发句柄单击打开。

您已将onClick={handleClickOpen}添加到ListItem而不是Avatar。

只需更改它将按预期工作

<ListItem button> //from here
<ListItemAvatar> 
<Avatar onClick={handleClickOpen}> // to here
<KeyboardArrowDownIcon />
</Avatar>
</ListItemAvatar>
<ListItemText primary={"hello"} />
......rest of the code