Javascript 不关闭对话框
我正在使用materialUI单击一个菜单项，然后打开一个对话框（子组件），但是对话框打开后，它似乎不会关闭，也不会更新Javascript 不关闭对话框,javascript,reactjs,material-ui,Javascript,Reactjs,Material Ui,我正在使用materialUI单击一个菜单项，然后打开一个对话框（子组件），但是对话框打开后，它似乎不会关闭，也不会更新noticeModule的数据。没有抛出任何错误，我相信这与使用useffect到setNoticeModal（props.open）作为初始状态有关。我试着删除useffect（）并抛出道具。打开noticeModal的默认useDate（），但是这样做之后，我的对话框就再也无法打开了。我在看什么 holidaySettings.js ... const
noticeModuleuseffectsetNoticeModal（props.open）useffect（）道具。打开noticeModal的默认useDate（）
，但是这样做之后，我的对话框就再也无法打开了。我在看什么
holidaySettings.js
...
const [dialogOpen, setDialogOpen] = React.useState(false);
const handleDialogOpen = (dataElement) => {
setDialogData(dataElement);
setDialogOpen(true);
setOpen(false);
}
...
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleDialogOpen}>Add Holiday</MenuItem>
</MenuList>
</ClickAwayListener>
...
<div className="card-body">
<div className="row">
<div className="text-left col-12">
<Styles>
<Table columns={columns} data={data} />
<HolidayDialog open={dialogOpen} onClose={handleDialogClose} data={dialogData}/>
</Styles>
</div>
</div>
</div>
...
const HolidayDialog = (props) => {
const [noticeModal, setNoticeModal] = useState(false);
const [selectedDate, setSelectedDate] = useState(new Date());
const [holidayData, setHolidayData] = useState(props.data);
useEffect(() => {
setNoticeModal(props.open)
});
const handleDateChange = (date) => {
setSelectedDate(date);
};
const handleClose = () => {
setNoticeModal(false);
console.log(noticeModal);
};
const handleChange = (e) => {
const { name, checked } = e.target;
setHolidayData((prevState) => ({ ...prevState, [name]: checked }));
};
const updateValues = (e) => {
const { name, value } = e.target;
setHolidayData((prevState) => ({ ...prevState, [name]: value }));
}
return (
<Dialog
open={noticeModal}
TransitionComponent={Transition}
keepMounted
onClose={handleClose}
aria-labelledby="notice-modal-slide-title"
aria-describedby="notice-modal-slide-description"
>
<DialogTitle id="customized-dialog-title" onClose={handleClose}>
{holidayData.HolidayName ? holidayData.HolidayName : 'Create New Holiday'}
</DialogTitle>
<DialogContent dividers>
<form noValidate autoComplete="off">
<div className="row">
<div className="col">
<TextField required name="HolidayName" id="outlined-basic" label="Holiday Name" variant="outlined" onChange={updateValues} value={holidayData.HolidayName || ''}/>
</div>
<div className="col">
<TextField id="outlined-basic" name="Branch" label="Branch" variant="outlined" onChange={updateValues} value={holidayData.Branch || 'ALL'}/>
</div>
</div>
<div className="row mt-3">
<div className="col">
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date picker inline"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</MuiPickersUtilsProvider>
</div>
<div className="col">
<TextField id="outlined-basic" name="Hours" label="Hours" variant="outlined" onChange={updateValues} value={holidayData.Hours || 'Closed'}/>
</div>
</div>
<div className="row mt-3">
<div className="col d-flex flex-column">
<FormControlLabel
control={
<Checkbox
checked={holidayData.Web || false}
value={holidayData.Web}
onChange={handleChange}
name="Web"
color="primary"
/>
}
label="Show on Web?"
/>
<FormControlLabel
control={
<Checkbox
checked={holidayData.CoOp || false}
value={holidayData.CoOp}
onChange={handleChange}
name="CoOp"
color="primary"
/>
}
label="CoOp Holiday?"
/>
</div>
<div className="col d-flex flex-column">
<FormControlLabel
control={
<Checkbox
checked={holidayData.Phone || false}
value={holidayData.Phone}
onChange={handleChange}
name="Phone"
color="primary"
/>
}
label="Use in IVR?"
/>
<FormControlLabel
control={
<Checkbox
checked={holidayData.Active || true}
value={holidayData.Active}
onChange={handleChange}
disabled
name="Active"
color="primary"
/>
}
label="Active"
/>
</div>
</div>
</form>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose} color="default">
Cancel
</Button>
<Button autoFocus onClick={handleClose} color="primary">
Create Holiday
</Button>
</DialogActions>
</Dialog>
)
}
export default HolidayDialog;
const handleClose = () => {
props.onClose()
};
。。。
const[dialogOpen，setDialogOpen]=React.useState（false）；
const handleDialogOpen=（数据元素）=>{
setDialogData（数据元素）；
setDialogOpen（true）；
setOpen（假）；
}
...
增加假期
...
...
holidayDialog.js
...
const [dialogOpen, setDialogOpen] = React.useState(false);
const handleDialogOpen = (dataElement) => {
setDialogData(dataElement);
setDialogOpen(true);
setOpen(false);
}
...
<ClickAwayListener onClickAway={handleClose}>
<MenuList autoFocusItem={open} id="menu-list-grow" onKeyDown={handleListKeyDown}>
<MenuItem onClick={handleDialogOpen}>Add Holiday</MenuItem>
</MenuList>
</ClickAwayListener>
...
<div className="card-body">
<div className="row">
<div className="text-left col-12">
<Styles>
<Table columns={columns} data={data} />
<HolidayDialog open={dialogOpen} onClose={handleDialogClose} data={dialogData}/>
</Styles>
</div>
</div>
</div>
...
const HolidayDialog = (props) => {
const [noticeModal, setNoticeModal] = useState(false);
const [selectedDate, setSelectedDate] = useState(new Date());
const [holidayData, setHolidayData] = useState(props.data);
useEffect(() => {
setNoticeModal(props.open)
});
const handleDateChange = (date) => {
setSelectedDate(date);
};
const handleClose = () => {
setNoticeModal(false);
console.log(noticeModal);
};
const handleChange = (e) => {
const { name, checked } = e.target;
setHolidayData((prevState) => ({ ...prevState, [name]: checked }));
};
const updateValues = (e) => {
const { name, value } = e.target;
setHolidayData((prevState) => ({ ...prevState, [name]: value }));
}
return (
<Dialog
open={noticeModal}
TransitionComponent={Transition}
keepMounted
onClose={handleClose}
aria-labelledby="notice-modal-slide-title"
aria-describedby="notice-modal-slide-description"
>
<DialogTitle id="customized-dialog-title" onClose={handleClose}>
{holidayData.HolidayName ? holidayData.HolidayName : 'Create New Holiday'}
</DialogTitle>
<DialogContent dividers>
<form noValidate autoComplete="off">
<div className="row">
<div className="col">
<TextField required name="HolidayName" id="outlined-basic" label="Holiday Name" variant="outlined" onChange={updateValues} value={holidayData.HolidayName || ''}/>
</div>
<div className="col">
<TextField id="outlined-basic" name="Branch" label="Branch" variant="outlined" onChange={updateValues} value={holidayData.Branch || 'ALL'}/>
</div>
</div>
<div className="row mt-3">
<div className="col">
<MuiPickersUtilsProvider utils={DateFnsUtils}>
<KeyboardDatePicker
disableToolbar
variant="inline"
format="MM/dd/yyyy"
margin="normal"
id="date-picker-inline"
label="Date picker inline"
value={selectedDate}
onChange={handleDateChange}
KeyboardButtonProps={{
'aria-label': 'change date',
}}
/>
</MuiPickersUtilsProvider>
</div>
<div className="col">
<TextField id="outlined-basic" name="Hours" label="Hours" variant="outlined" onChange={updateValues} value={holidayData.Hours || 'Closed'}/>
</div>
</div>
<div className="row mt-3">
<div className="col d-flex flex-column">
<FormControlLabel
control={
<Checkbox
checked={holidayData.Web || false}
value={holidayData.Web}
onChange={handleChange}
name="Web"
color="primary"
/>
}
label="Show on Web?"
/>
<FormControlLabel
control={
<Checkbox
checked={holidayData.CoOp || false}
value={holidayData.CoOp}
onChange={handleChange}
name="CoOp"
color="primary"
/>
}
label="CoOp Holiday?"
/>
</div>
<div className="col d-flex flex-column">
<FormControlLabel
control={
<Checkbox
checked={holidayData.Phone || false}
value={holidayData.Phone}
onChange={handleChange}
name="Phone"
color="primary"
/>
}
label="Use in IVR?"
/>
<FormControlLabel
control={
<Checkbox
checked={holidayData.Active || true}
value={holidayData.Active}
onChange={handleChange}
disabled
name="Active"
color="primary"
/>
}
label="Active"
/>
</div>
</div>
</form>
</DialogContent>
<DialogActions>
<Button autoFocus onClick={handleClose} color="default">
Cancel
</Button>
<Button autoFocus onClick={handleClose} color="primary">
Create Holiday
</Button>
</DialogActions>
</Dialog>
)
}
export default HolidayDialog;
const handleClose = () => {
props.onClose()
};
const HolidayDialog=（道具）=>{
const[noticeModal，setNoticeModal]=useState（false）；
const[selectedDate，setSelectedDate]=useState（新日期（））；
const[holidayData，setHolidayData]=useState（props.data）；
useffect（（）=>{
SetNoticeModel（道具打开）
});
const handleDateChange=（日期）=>{
设置选定日期（日期）；
};
常量handleClose=（）=>{
SetNoticeModel（假）；
console.log（noticeModal）；
};
常数handleChange=（e）=>{
const{name，checked}=e.target；
setHolidayData（（prevState）=>（{…prevState[name]：checked}）；
};
常量更新值=（e）=>{
常量{name，value}=e.target；
setHolidayData（（prevState）=>（{…prevState，[名称]：值}））；
}
返回(
{holidayData.HolidayName？holidayData.HolidayName:'创建新假日'}
取消
创建假日
)
}
导出默认假期对话框；
在useEffect中，您正在将noticeModel
值重置为道具。打开
，我相信这是真的吗
我相信您要做的是设置NoticeModel的初始值。
尝试更改以下代码并删除useEffect
const [noticeModal, setNoticeModal] = useState(props.open);
在useEffect中，您正在将noticeModel
值重置为props.open
，我相信这是真的
我相信您要做的是设置NoticeModel的初始值。
尝试更改以下代码并删除useEffect
const [noticeModal, setNoticeModal] = useState(props.open);
你能试试这个吗
我假设是道具。onClose在家长（假期设置）上使对话框打开至假）
如果props.onClose未在父项（holidaySettings）上将dialogOpen设置为false。您可以添加close属性，将dialogOpen设置为false
<HolidayDialog open={dialogOpen} close={()=>setDialogOpen(false);} onClose={handleDialogClose} data={dialogData}/>
const handleClose = () => {
props.close()
};
setDialogOpen（false）；}onClose={handleDialogClose}data={dialogData}/>
常量handleClose=（）=>{
道具关闭（）
};
并传递道具。打开对话框
<Dialog
open={props.open}
/>
你能试试这个吗
我假设是道具。onClose在家长（假期设置）上使对话框打开至假）
如果props.onClose未在父项（holidaySettings）上将dialogOpen设置为false。您可以添加close属性，将dialogOpen设置为false
<HolidayDialog open={dialogOpen} close={()=>setDialogOpen(false);} onClose={handleDialogClose} data={dialogData}/>
const handleClose = () => {
props.close()
};
setDialogOpen（false）；}onClose={handleDialogClose}data={dialogData}/>
常量handleClose=（）=>{
道具关闭（）
};
并传递道具。打开对话框
<Dialog
open={props.open}
/>
您没有提供对useffect
的任何依赖关系，因此它在每次重新渲染时都会运行。在useEffect中，您正在切换模式，从而切换问题
useffect（（）=>{
SetNoticeModel（道具打开）
});// {
SetNoticeModel（道具打开）
}，[props.open]）// 您没有为useffect
提供任何依赖项，因此每次重新渲染时都会运行它。在useEffect中，您正在切换模式，从而切换问题
useffect（（）=>{
SetNoticeModel（道具打开）
});// {
SetNoticeModel（道具打开）
}，[props.open]）//在我的问题中，我说当我这样做时，对话框甚至不会打开在我的问题中，我说当我这样做时，对话框甚至不会打开是console.log of handleClose logging on onclose event？是console.log of handleClose logging on onclose event？这用于关闭对话框！然而，它似乎提出了一个新的问题，关闭后，我现在无法再次打开对话框，直到我刷新页面？这是因为props.open总是正确的。对话框关闭后，您是否将其设置为false？我