Блог

Я делаю свой первый загрузочный модальный в react, но я борюсь с этим. У меня есть приведенный ниже компонент, который импортируется в панель навигации моего приложения. Когда я нажимаю на тег привязки в компоненте ниже, он переключает отображение модальных HTML-элементов в DOM. Однако эти элементы не видны.

Я пытаюсь использовать обычный bootstrap вместо react-strap, потому что у меня ограниченный опыт работы с React-strap и я пытаюсь избежать изучения нового пакета. Выполнимо ли это с обычной загрузкой в React?

До сих пор я пробовал несколько исправлений, одно из которых — удалить тернарный оператор в моей функции рендеринга, а затем добавить атрибуты data-toggle и data-target в мой тег привязки. Однако у меня это не сработало.

 import React, { Component } from 'react'

export default class RegisterModal extends Component {
    
    state={
        modal: false
    }

    toggle = (e) => {
        e.preventDefault();
        this.setState(
            {modal: !this.state.modal}
        )
    }

    render() {
        return (
            <div>
                <a href='' className="nav-link" onClick={this.toggle} >Register</a>

                { this.state.toggle? <div id="registerModal" className="modal" tabindex="-1" role="dialog">
                        <div className="modal-dailog" role = "document">
                            <div className="modal-content">
                                <div className="modal-header">
                                    <h5 className="modal-title">Register</h5>
                                    <button className="close" type='button' data-dismiss="modal" aria-label='Close'>
                                        <span aria-hidden='true'>amp;times;</span>
                                    </button>
                                </div>
                                <div className="modal-body">
                                    <p>filler text</p>
                                </div>
                            </div>
                        </div>
                    </div> : null}

            </div>
        )
    }
}
 

Редактировать: я должен также отметить, что я ввожу bootstrap, импортируя его в свой index.js досье. Есть ли способ, которым я должен импортировать аспект начальной загрузки Jquery с этой настройкой?

 import App from './App';

import "bootstrap/dist/css/bootstrap.min.css"

import './App.css';
import reportWebVitals from './reportWebVitals';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
 

Только начальная загрузка использует DOM для отображения или скрытия диалогового окна, поэтому для того, чтобы он работал, он должен связываться между button or a и целью диалога. Вы используете состояние реакции для отображения / скрытия, что может не привести к желаемому результату. Ниже приведен код, который работает

 <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">amp;times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div> 

Важным свойством, которое связывает a button/link в этом случае, является data-target , а не состояние реакции. Вы все равно можете добавить прослушиватель событий к кнопке.

Следует отметить, что это может решить вашу проблему, но в будущем постарайтесь избежать этой проблемы, используя либо react-bootstrap или reactstrap , поскольку он интегрирует управление состоянием реакции с bootstrap, и это поможет вам намного позже. Они также не сильно отличаются от самого Boostrap. Для справки: вот как может выглядеть ваш код с помощью react-bootstrap

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

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}