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 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，但不显示Modal。有人可以帮我吗？

Answer 1

您的代码中存在一些问题

customModal必须是Register组件渲染的一部分
应该有一个状态可以从寄存器组件中跟踪模式的状态
还必须在模态关闭时通知寄存器

我已经修改了您的代码并可以正常工作。您可以实时找到它here

Answer 2

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

将来您可能会遇到z-index问题。

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

现在，您的问题是，您必须在 render方法中渲染模式并进行控制，且其布尔状态为“ showModal”。

我为您准备一个示例：

example in my GitHub account

git clone ...
npm安装
npm运行开始

预览：

模态没有出现在反应中

2 个答案: