Блог

Главная - Вопросы по программированию - Может ли одновременно иметь в onClick реквизит функции и функцию в reactjs?

Может ли одновременно иметь в onClick реквизит функции и функцию в reactjs?

#javascript #reactjs #bootstrap-modal

#javascript #reactjs #bootstrap-модальный

Вопрос:

Привет, у меня есть модальный с двумя кнопками

            <Modal show={props.show} onHide={props.handleModalOpen}>
            <Modal.Header closeButton>
                <Modal.Title>Fill this form to continue</Modal.Title>
            </Modal.Header>
            <Modal.Body>This is the modal </Modal.Body>
            <Modal.Footer>
                <Button variant="secondary" onClick={props.handleModalOpen}>
                    Close
                </Button>
                <Button variant="primary" onClick={()=>(myhadler,props.handleModalOpen)}>
                    Save Changes
                </Button>
            </Modal.Footer>
          </Modal>

В onClick я хочу запустить функцию, которая вызывала

      myhandler

и закройте модальный, если кнопка нажата с помощью

     props.handleModalOpen.

Props.handleModalOpen взаимодействует с другим компонентом, который является родительским. Моя проблема в том, что, когда я нажал кнопку, моя функция myhandler не работает, и единственное, чего я добиваюсь, это закрыть модальный. Есть ли способ запустить одновременно мою функцию и props.handleModalOpen без проблем

Функция

   myhandler

используется для сохранения данных формы в локальном хранилище

Комментарии:

1. почему бы вам не объединить их? например onClick = () => myFunction() , и в myFunction вы выполняете свою myhadler логику и вызываете props.handleModalOpen ? Лучше иметь логику внутри функции компонента и не загрязнять HTML (jsx) логикой. Используйте JSX только для вызова необходимых вам методов

Ответ №1:

Вы можете просто вызвать myHandler() область обратного вызова и добавить состояние, если кнопка открылась с помощью handleModalOpen 

 const [isOpened, setIsOpened] = useState(false);

<Modal.Footer>
  <Button
    variant="secondary"
    onClick={() => {
      props.handleModalOpen();
      setIsOpened(true);
    }}
  >
    Close
  </Button>
  <Button
    variant="primary"
    onClick={() => {
      myHandler();
      if (isOpened) {
        props.handleModalOpen();
        setIsOpened(false);
      }
    }}
  >
    Save Changes
  </Button>
</Modal.Footer>