React JS，调用函数并点击关闭对话框

Question

我对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, visible, 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;
}

如何实现清除查询并在单击"是"时关闭对话框。

Answer 1

你好@Sudiv问题在这里

<Button size="btnsm" variant="primary" onClick={()=>resetNewQuery(),{onClose}}>Yes</Button>

当你将回调传递给onClick时，如果你想调用多个函数，你需要打开大括号

onClick={() => {
resetQuery();
onClose();
}}

或者你可以在你的组件上有一个处理程序，比如

onClick={() => onClickHanlder()}
onClickHandler = () => {
resetQuery();
onClose();
}