Как я могу использовать useState Reactjs для управления открытием или закрытием модального Bootstrap? (не использовать библиотеку React Bootstrap) - PullRequest
Новая
       3

Как я могу использовать useState Reactjs для управления открытием или закрытием модального Bootstrap? (не использовать библиотеку React Bootstrap)

1 голос
/ 11 февраля 2020

Я работаю с Bootstrap модальным и Reactjs. Теперь я хочу контролировать, как открывать и закрывать модальный Bootstrap без Jquery кода. Так что моя идея заключается в использовании useState для управления состоянием модального режима, если true, он добавит класс «show» для открытия модального режима, а в false добавит класс «hide». Но это не работает, как я могу решить это? Или все-таки есть способ управления модалом без Jquery кода? Спасибо 

const [openModal, setopenModal] = useState(false);
const openmodal = () => {
   setopenModal(!openModal);
};
return (
 <div>
  <button onClick={openmodal}>open</button>
   <div id="mod" className={`modal ${openModal ? 'show' : 'hide'}`}>
    <div className="modal-dialog modal-xl">
      <div className="modal-content">
        hello
      </div>
    </div>
  </div>
</div>

Ответы [ 2 ]

1 голос
/ 11 февраля 2020 
function model(){
  const [openModal, setopenModal] = useState(false);

  const openmodal = () => {
     setopenModal(state=>!state);
  };

  return (
     <div>
       <button onClick={openmodal}>open</button>
       <div id="mod" className={`modal ${openModal ? 'show' : 'hide'}`}>
        <div className="modal-dialog modal-xl">
          <div className="modal-content">
            hello
          </div>
        </div>
      </div>
    </div>
 )
}
1 голос
/ 11 февраля 2020

Вы можете использовать атрибуты данных.

Опции можно передать через атрибуты данных или JavaScript. Для атрибутов данных добавьте имя опции к data-, как в data-show = "".

Атрибут data-show указывает, показывать ли модальное при инициализации. 

<div id="mod" data-show={openModal ? 'true' : 'false'}> ... </div>

См .: https://www.w3schools.com/Bootstrap/bootstrap_ref_js_modal.asp

В качестве альтернативы вы можете использовать useRef, чтобы получить модальный элемент DOM и получить к нему доступ.

...