Автоматически открывайте приложение Modal в React JS на странице.

Question

Ниже приведен компонент класса App, в котором я хочу открыть Modal после полной загрузки страницы.

Также я попытался использовать метод жизненного цикла componentDidMount(), но он не удался.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleSHow = this.handleShow.bind(this);
        this.state = {
            modalState : true
        }
    }

    handleShow = () => {
        this.setState(() => {
            return {
                modalState : false
            };
        });
    }

    render() {
        console.log(this.state.modalState)
        return (
            <div>
                <h1 className="main-title">My Profile</h1>
                <MainContent />
            </div>
        );
    }
}

export default App;

Answer 1

Предполагая, что вы используете Bootstrap Модальный , вот базовый c пример:

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            modalState: true
        };

        this.handleShow = this.handleShow.bind(this);
    }

    handleShow() {
        this.setState({ modalState: !this.state.modalState });
    }

    render() {
        return (
            <div>
                <div className={"modal fade" + (this.state.modalState ? " show d-block" : " d-none")} tabIndex="-1" role="dialog">
                    <div className="modal-dialog" role="document">
                        <div className="modal-content">
                            <div className="modal-header">
                                <h5 className="modal-title">My Profile</h5>
                                <button type="button" className="close" onClick={this.handleShow}>
                                    <span>&times;</span>
                                </button>
                            </div>
                            <div className="modal-body">...</div>
                            <div className="modal-footer">
                                <button type="button" className="btn btn-secondary" onClick={this.handleShow}>Close</button>
                                <button type="button" className="btn btn-primary">Save changes</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

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

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="root"></div>

И если вы используете реаги- bootstrap, используйте так:

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            show: true
        };
        
        this.handleClose = this.handleClose.bind(this);
        this.handleShow = this.handleShow.bind(this);
    }
    
    handleClose (){
        this.setState({ show: false });
    };
    
    handleShow (){
        this.setState({ show: true });
    };
    
    render() {
        return(
            <div>
                <ReactBootstrap.Button variant="primary" onClick={this.handleShow}>Launch modal</ReactBootstrap.Button>

                <ReactBootstrap.Modal show={this.state.show} onHide={this.handleClose}>
                    <ReactBootstrap.Modal.Header closeButton>
                        <ReactBootstrap.Modal.Title>My Profile</ReactBootstrap.Modal.Title>
                    </ReactBootstrap.Modal.Header>
                    <ReactBootstrap.Modal.Body>...</ReactBootstrap.Modal.Body>
                    <ReactBootstrap.Modal.Footer>
                        <ReactBootstrap.Button variant="secondary" onClick={this.handleClose}>Close</ReactBootstrap.Button>
                        <ReactBootstrap.Button variant="primary">Save Changes</ReactBootstrap.Button>
                    </ReactBootstrap.Modal.Footer>
                </ReactBootstrap.Modal>
            </div>
        );
    }
}

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

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="root"></div>

Answer 2

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

Однако, глядя на ваш код, я нашел опечатку.

this.handleSHow = this.handleShow.bind(this);
Здесь в this.handleSHow H в заглавных буквах. Поэтому, если вы вызываете метод для запуска открытого состояния модала, например this.handleShow(), он не будет работать.

Либо исправьте опечатку, либо вызовите метод следующим образом: this.handleSHow().

Редактировать: Снова глядя на ваш код, я только что понял, что вам не нужен this.handleSHow = this.handleShow.bind(this); эта строка, потому что вы используете синтаксис функции стрелки для объявления вашего метода, т.е. handleShow = () =>. Функции стрелок автоматически связывают контекст this с вашей функцией из внешней области видимости, которая в данном случае является вашим App компонентом, поэтому вам не нужно .bind(this) в конструкторе.

Если вы все еще хотите чтобы сохранить this.handleSHow = this.handleShow.bind(this);, вам нужно изменить синтаксис функции стрелки handleShow = () => на handleShow() { ... }.

Answer 3

Вы могли бы сделать что-то вроде этого

class App extends React.Component {
constructor(props){
  super(props);
  this.handleSHow = this.handleShow.bind(this);
  this.state = {
    modalState : false
  }
}

componentDidMount(){
  this.setState({
    modalState : true
  }) 
}

render()
{
  console.log(this.state.modalState)
  return(
      <div>
      {this.state.modalState ? <YourModal/> : null}
      <h1 className="main-title">My Profile</h1>
      <MainContent />
      </div>
      )
}
}

export default App;