问题描述
我对React完全陌生。我必须编辑某人的代码以添加新功能。
单击链接后,代码将显示使用模式的确认对话框。当用户单击“是”时,应清除区域中的文本(通过调用函数),然后关闭对话框,而单击“取消”对话框时,只需关闭即可。
我修改了代码,以便“取消”按钮正常工作。但是,当我单击“是”时,它正在调用该函数并清除文本,但没有关闭对话框。我的代码如下。
function ConfirmModal({resetNewQuery,visible,onClose }) {
return (
<>
<Modal
width={500}
title="Confirmation"
visible={visible}
onClose={onClose}
>
<div><b>Are you sure you want to clear query? All the contents will be deleted!</b></div>
<div/>
<div/>
<Button size="btnsm" variant="primary" onClick={()=>resetNewQuery(),{onClose}}>Yes</Button>
<Button size="btnsm" variant="primary" onClick={onClose}>Cancel</Button>
</Modal>
</>
);
}
模态代码
function Modal({ title,onClose,width,children }) {
if (visible) {
return (
<Dialog
aria-label={title}
onDismiss={onClose}
className={styles.Dialog}
style={{
width,}}
>
<div className={styles.titleWrapper}>
<span>{title}</span>
{onClose && (
<div class="iconwrapper" onClick={onClose}>
<CloseIcon />
</div>
)}
</div>
<div className={styles.dialogBody}>{children}</div>
</Dialog>
);
}
return null;
}
如何实现清除查询并单击“是”关闭对话框。
解决方法
嗨,@ Sudiv,问题在这里
<Button size="btnsm" variant="primary" onClick={()=>resetNewQuery(),{onClose}}>Yes</Button>
当您将回调传递给onClick时,如果要调用多个函数,则需要打开花括号
onClick={() => {
resetQuery();
onClose();
}}
或者您可以在组件上使用类似的处理程序
onClick={() => onClickHanlder()}
onClickHandler = () => {
resetQuery();
onClose();
}