Почему мой модал не появляется после клика? - PullRequest
Новая
       65

Почему мой модал не появляется после клика?

0 голосов
/ 20 сентября 2019

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

function AddNew(props) {
  const [show, setShow] = useState(false);

  return (
<>
  <Button variant="primary" onClick={() => setShow(true)} id="add-patient">
    Pridėti
  </Button>
  <Modal
    show={show}
    onHide={() => setShow(false)}
    dialogClassName="modal-90w"
    aria-labelledby="add-new"
  >
    <Modal.Header closeButton>
      <Modal.Title id="add-new">Custom Modal Styling</Modal.Title>
    </Modal.Header>
    <Modal.Body>
      <p>...</p>
    </Modal.Body>
  </Modal>
</>
  );
}

И это весь код: Код

Пожалуйста, помогите мне!

Ответы [ 2 ]

1 голос
/ 20 сентября 2019

Вот рабочий пример: https://codesandbox.io/s/cranky-yonath-ui7q3

Я просто добавляю animation={false} в качестве реквизита к компоненту Modal, чтобы он работал (возможно, некоторые CSS-файлы отсутствуют, чтобы анимация работала): 

<Modal
        show={show}
        onHide={() => setShow(false)}
        dialogClassName="modal-90w"
        aria-labelledby="add-new"
        animation={false}
      >

Редактировать: Это на самом деле причина, добавить загрузчик в качестве зависимости и import "bootstrap/dist/css/bootstrap.min.css"; в вашем коде ( следуйте инструкциям по установке здесь )

0 голосов
/ 20 сентября 2019

Пожалуйста, прочитайте Введение в реакцию на загрузку .Вам не хватает начальной загрузки css, которая требуется для работы реакции-начальной загрузки.

Вам необходимо установить загрузочную версию 

npm install bootstrap

, а затем импортировать ее в файл index.js

* 1010.*
...