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

问题描述

我对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();
}