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

Question

我对 React 完全陌生。我不得不编辑某人的代码以添加新功能。

单击 link，代码显示一个使用模态的确认对话框。当用户单击“是”时，它应该清除某个区域中的文本（通过调用函数）然后关闭对话框，当单击“取消”对话框时应该简单地关闭。

我修改了代码，取消按钮工作正常。但是当我点击是时，它正在调用函数并清除文本但不关闭对话框。我的代码如下。

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

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

React JS, calling function and closing a dialog on click

reactjs

dialog

modal-dialog

confirm