模态没有出现在反应中

Question

我刚开始回答这个问题。这是我的 CustomModal，

import React from 'react';
import {useState} from "react";
import {Button, Modal} from "react-bootstrap";

const CustomModal = (props) =>{
    const [show, setShow] = useState(true);
    const handleClose = () => setShow(false);

    return (
        <div>
            <Modal show={show} animation={false}>
                <Modal.Header closeButton>
                    <Modal.Title>Modal heading</Modal.Title>
                </Modal.Header>
                <Modal.Body>{props.message}</Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={handleClose}>
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        </div>
    )
};
export default CustomModal;

我想在用户提交注册表单时在 class 组件中呈现它。

class Register extends React.Component {
    state = {
        email : '',
        username: '',
        password: '',
        second_password: ''
    };
    handleSubmit = async (event) =>{
        event.preventDefault();

        const emailValidated = await this.validateEmail(this.state.email);
        const usernameValidated = this.validateUsername(this.state.username);
        const passwordValidated = this.validatePassword(this.state.password, this.state.second_password);
        let registrationComplete = false;
        if(emailValidated === true && usernameValidated === true && passwordValidated === true){
            registrationComplete = await this.register(this.state.email, this.state.username, this.state.password);
            console.log(registrationComplete);
            this.showModal("Hello World!"); //This is the function begin called to show the modal.
        }

    };
    validateUsername = (username) =>{
        return true;
    };

    validatePassword = (password, second) =>{
        return true;
    };

    validateEmail = async (email) =>{
        return true;
    };


    //This is the function that should display the modal

    showModal = (message) =>{
        return (<CustomModal message={message}/>);
    };


    register = async (email, username, password) =>{
        return true;
    };
    render() {
        return (
            <div className="register">
                <h1>Register</h1>
                <Form onSubmit={this.handleSubmit}>
                    <Form.Group controlId="formBasicEmail">
                        <Form.Label>Email address</Form.Label>
                        <Form.Control type="email"
                                      placeholder="Enter email"
                                      value={this.state.email}
                                      onChange={event => this.setState({email: event.target.value})}/>
                        <Form.Text className="text-muted">
                            Please make sure you've access to this mail. You'll receive an activation code here.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group controlId="formPlainText">
                        <Form.Label className="form-label">Username</Form.Label>
                        <Form.Control type="text"
                                      placeholder="Username"
                                      value={this.state.username}
                                      onChange={event => this.setState({username: event.target.value})}/>
                        <Form.Text className="text-muted">
                            Please make it atleast 8 characters long.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group controlId="formBasicPassword">
                        <Form.Label>Password</Form.Label>
                        <Form.Control type="password"
                                      placeholder="Password"
                                      value={this.state.password}
                                      onChange={event => this.setState({password: event.target.value})}/>
                        <Form.Text className="text-muted">
                            Please make sure it's atleast 8 characters long and uses a mix of letters and numbers.
                        </Form.Text>
                    </Form.Group>

                    <Form.Group controlId="formBasicPassword">
                        <Form.Label>Retype Password</Form.Label>
                        <Form.Control type="password"
                                      placeholder="Password"
                                      value={this.state.second_password}
                                      onChange={event => this.setState({second_password: event.target.value})}/>
                    </Form.Group>


                    <Button variant="primary" type="submit">
                        Register
                    </Button>
                </Form>
            </div>
        );
    }
}
export default Register;

所有值都正确，控制台日志显示 true 但模态框不显示。有人可以帮我解决这个问题吗？

Answer 1

您的代码存在一些问题

customModal 必须是 Register 组件呈现的一部分
应该有一个状态来跟踪 Register 组件中模态的状态
此外，当模态框关闭时必须通知寄存器

我已经修改了您的代码并开始工作。你可以在现场找到它 here

Answer 2

我更喜欢解决这个创建门户的问题 here documentation。

您以后可能会遇到 z-index 问题。

基本上，您在 DOM 层次结构之外创建一个元素。

现在，您的问题是，您必须在 render 方法 中渲染模态并使用布尔状态 "showModal".

控制它

我给你准备了一个例子：

example in my GitHub account

git 克隆 ...
npm 安装
npm 运行开始

预览：

模态没有出现在反应中

Modal doesnt show up in react

javascript

reactjs

react-bootstrap

react-bootstrap4-modal