Блог

Я совершенно новичок в React. Мне пришлось отредактировать чей-то код, чтобы добавить новую функциональность.

При нажатии на ссылку код показывает диалоговое окно подтверждения с использованием modal. Когда пользователь нажимает «Да», он должен очистить текст в области (путем вызова функции), а затем закрыть диалоговое окно, при нажатии на «Отмена» диалоговое окно должно просто закрыться.

Я изменил код, чтобы кнопка отмены работала нормально. Но когда я нажимаю на да, это вызывает функцию и очищает текст, но не закрывает диалоговое окно. Мой код ниже.

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