Question

我变得有点绝望了。我想使用bootstrap在reactjs中创建一个模态对话框。我已经用npm安装了模块并将其导入我的代码中。我尝试了一个简单的例子：

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


class Config extends React.Component {


constructor(){
    super();

    this.state = {

        show: false
    }
    this.handleHide = this.handleHide.bind(this);

}


handleHide() {
    this.setState({ show: false });
}

render(){


    return ( <div>
            <Button
                bsStyle="primary"
                bsSize="large"
                onClick={() => this.setState({ show: true })}
            >
                Launch modal
            </Button>

            <Modal show={this.state.show} onHide={this.handleHide}>
                <Modal.Header >
                   Header
                </Modal.Header>
                <Modal.Body>
                    Text
                </Modal.Body>
                <Modal.Footer>
                    <Button onClick={this.handleHide}>Close</Button>
                </Modal.Footer>
            </Modal>
    </div>)
}

}

export default Config;

我没有收到任何错误，但如果点击按钮，我也看不到任何错误。我通过Elements看了Chrome开发人员工具，我可以看到那里的模态，这让人很困惑。有人知道出了什么问题吗？

Answer 1

这对我有用，它与你的例子几乎相同。但是，我没有使用一个函数自行处理状态，而是使用了handleClose和HandleShow的2个函数。

＆＃13;

import React from 'react';

import { Link } from 'react-router-dom';
import { Modal, Button } from 'react-bootstrap';

class Header extends React.Component {
    constructor(props){
        super(props);

        this.handleClose = this.handleClose.bind(this);
        this.handleShow = this.handleShow.bind(this);

        this.state = {
            show: false
        }
    }

    handleClose(){
        this.setState({
            show:false
        });
    }

    handleShow(){
        this.setState({
            show:true
        });
    }

    render(){

        // console.log(this.state);

        return (
            <div className="header-container">
                <nav className="navbar navbar-dark bg-dark">
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/Contact">Contact</Link></li>
                        <li><Button className="login-button" onClick={this.handleShow}>LOGIN</Button></li>
                    </ul>
                    <Modal show={this.state.show} onHide={this.handleClose}>
                        <Modal.Header closeButton>
                            <Modal.Title>Modal Header</Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            Modal Body
                        </Modal.Body>
                    </Modal>
                </nav>
            </div>
        )
    }
}

export default Header;

＆＃13;

使用reactjs引导程序创建模态

1 个答案: