React.js 中的 Bootstrap 模式 [英] Bootstrap modal in React.js

查看：27
本文介绍了React.js 中的 Bootstrap 模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我需要通过单击 Bootstrap 导航栏中的按钮和其他位置来打开 Bootstrap Modal(显示组件实例的数据，即提供编辑"功能)，但我不不知道如何做到这一点.这是我的代码:

代码更新.

ApplicationContainer = React.createClass({渲染:函数(){返回 (<div className="容器流体"><导航栏/><div className="row"><div className="col-md-2"><ScheduleEntryList/>

<div className="col-md-10">

<ScheduleEntryModal/>

);}});导航栏 = React.createClass({渲染:函数(){返回 (<nav className="navbar navbar-default navbar-fixed-top"><div className="容器流体"><div className="navbar-header"><a className="navbar-brand" href="#"><span className="glyphicon glyphicon-eye-open"></span></a>

<form className="navbar-form navbar-left"><button className="btn btn-primary" type="button" data-toggle="modal" data-target="#scheduleentry-modal"><span className="glyphicon glyphicon-plus"></span></表单><ul className="nav navbar-nav navbar-right"><li><a href="#"><span className="glyphicon glyphicon-user"></span>用户名</a></li>

</nav>);}});ScheduleEntryList = React.createClass({getInitialState:函数(){返回{数据:[]}},加载数据:函数(){$.ajax({url: "/api/tasks",数据类型:json"，成功:功能(数据){this.setState({数据: 数据});}.bind(this),错误:函数(xhr，状态，错误){console.error("/api/tasks", status, error.toString());}.绑定(这个)});},componentWillMount:函数(){this.loadData();setInterval(this.loadData, 20000);},渲染:函数(){项目 = this.state.data.map(function(item) {return <ScheduleEntryListItem item={item}></ScheduleEntryListItem>;});返回 (<div className="list-group"><a className="list-group-item active"><h5 className="list-group-item-heading">即将推出</h5></a>{项目}

);}});ScheduleEntryListItem = React.createClass({openModal:函数(){$("#scheduleentry-modal").modal("show");},渲染:函数(){截止日期 = 时刻(this.props.item.deadline).format("MMM Do YYYY, h:mm A");返回 (<a className="list-group-item" href="#" onClick={this.openModal}><h5 className="list-group-item-heading">{this.props.item.title}<small className="list-group-item-text">{最后期限}</小></a>);}});模态 = React.createClass({componentDidMount:函数(){$(this.getDOMNode()).modal({backdrop: "static", keyboard: true, show: false});},componentWillUnmount:函数(){$(this.getDOMNode()).off("隐藏", this.handleHidden);},打开:函数(){$(this.getDOMNode()).modal("show");},关闭:函数(){$(this.getDOMNode()).modal("隐藏");},渲染:函数(){返回 (<div id="scheduleentry-modal" className="modalfade" tabIndex="-1"><div className="modal-dialog"><div className="modal-content"><div className="modal-header"><button type="button" className="close" data-dismiss="modal"><span>&times;</span><h4 className="modal-title">{this.props.title}</h4>

<div className="modal-body">{this.props.children}

<div className="modal-footer"><button type="button" className="btn btn-danger pull-left" data-dismiss="modal">删除</button><button type="button" className="btn btn-primary">保存</button>

)}});ScheduleEntryModal = React.createClass({渲染:函数(){var modal = null;模态 = (<Modal title="添加日程表条目"><form className="form-horizo​​ntal"><div className="form-group"><label htmlFor="title" className="col-sm-2 control-label">标题</label><div className="col-sm-10"><input id="title" className="form-control" type="text" placeholder="Title" ref="title" name="title"/>

<div className="form-group"><label htmlFor="deadline" className="col-sm-2 control-label">Deadline</label><div className="col-sm-10"><input id="deadline" className="form-control" type="datetime-local" ref="deadline" name="deadline"/>

<div className="form-group"><label htmlFor="已完成" className="col-sm-2 control-label">已完成</label><div className="col-sm-10"><input id="已完成" className="form-control" type="checkbox" placeholder="已完成" ref="已完成" name="已完成"/>

<div className="form-group"><label htmlFor="description" className="col-sm-2 control-label">Description</label><div className="col-sm-10"><textarea id="description" className="form-control" placeholder="Description" ref="description" name="description"/>

</表单></模态>);返回 (<div className="scheduleentry-modal">{模态}

);}});

感谢对代码的其他评论和改进.

解决方案

你可以使用 React-Bootstrap (https://react-bootstrap.github.io/components/modal).该链接有一个模态示例.加载 react-bootstrap 后，模态组件就可以用作 react 组件了:

var Modal = ReactBootstrap.Modal;

然后可以用作反应组件.

对于 Bootstrap 4，有 react-strap(https://reactstrap.github.io).React-Bootstrap 仅支持 Bootstrap 3.

I need to open a Bootstrap Modal from clicking on a button in a Bootstrap navbar and other places (to show data for a component instance, ie. providing "editing" functionality), but I don't know how to accomplish this. Here is my code:

EDIT: Code updated.

ApplicationContainer = React.createClass({
    render: function() {
        return (
            <div className="container-fluid">
            <NavBar />
                <div className="row">
                    <div className="col-md-2">
                        <ScheduleEntryList />
                    </div>
                    <div className="col-md-10">
                    </div>
                </div>
                <ScheduleEntryModal />
            </div>
        );
    }
});

NavBar = React.createClass({
    render: function() {
        return (
            <nav className="navbar navbar-default navbar-fixed-top">
                <div className="container-fluid">
                    <div className="navbar-header">
                        <a className="navbar-brand" href="#">
                            <span className="glyphicon glyphicon-eye-open"></span>
                        </a>
                    </div>
                    <form className="navbar-form navbar-left">
                        <button className="btn btn-primary" type="button" data-toggle="modal" data-target="#scheduleentry-modal">
                            <span className="glyphicon glyphicon-plus">
                            </span>
                        </button>
                    </form>
                    <ul className="nav navbar-nav navbar-right">
                        <li><a href="#"><span className="glyphicon glyphicon-user"></span> Username</a></li>
                    </ul>
                </div>
            </nav>
        );
    }
});

ScheduleEntryList = React.createClass({
    getInitialState: function() {
        return {data: []}
    },

    loadData: function() {
        $.ajax({
            url: "/api/tasks",
            dataType: "json",

            success: function(data) {
                this.setState({data: data});
            }.bind(this),

            error: function(xhr, status, error) {
                console.error("/api/tasks", status, error.toString());
            }.bind(this)
        });
    },

    componentWillMount: function() {
        this.loadData();
        setInterval(this.loadData, 20000);
    },

    render: function() {
        items = this.state.data.map(function(item) {
            return <ScheduleEntryListItem item={item}></ScheduleEntryListItem>;
        });

        return (
            <div className="list-group">
                <a className="list-group-item active">
                    <h5 className="list-group-item-heading">Upcoming</h5>
                </a>
                {items}
            </div>
        );
    }
});

ScheduleEntryListItem = React.createClass({
    openModal: function() {
        $("#scheduleentry-modal").modal("show");
    },

    render: function() {
        deadline = moment(this.props.item.deadline).format("MMM Do YYYY, h:mm A");

        return (
            <a className="list-group-item" href="#" onClick={this.openModal}>
                <h5 className="list-group-item-heading">
                    {this.props.item.title}
                </h5>
                <small className="list-group-item-text">
                    {deadline}
                </small>
            </a>
        );
    }
});

Modal = React.createClass({
    componentDidMount: function() {
        $(this.getDOMNode())
            .modal({backdrop: "static", keyboard: true, show: false});
    },

    componentWillUnmount: function() {
        $(this.getDOMNode())
            .off("hidden", this.handleHidden);
    },

    open: function() {
        $(this.getDOMNode()).modal("show");
    },

    close: function() {
        $(this.getDOMNode()).modal("hide");
    },

    render: function() {
        return (
            <div id="scheduleentry-modal" className="modal fade" tabIndex="-1">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button" className="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                            <h4 className="modal-title">{this.props.title}</h4>
                        </div>
                        <div className="modal-body">
                            {this.props.children}
                        </div>
                        <div className="modal-footer">
                            <button type="button" className="btn btn-danger pull-left" data-dismiss="modal">Delete</button>
                            <button type="button" className="btn btn-primary">Save</button>
                        </div>
                    </div>
                </div>
            </div>

        )
    }
});

ScheduleEntryModal = React.createClass({
    render: function() {
        var modal = null;
        modal = (
            <Modal title="Add Schedule Entry">
                    <form className="form-horizontal">
                        <div className="form-group">
                            <label htmlFor="title" className="col-sm-2 control-label">Title</label>
                            <div className="col-sm-10">
                                <input id="title" className="form-control" type="text" placeholder="Title" ref="title" name="title"/>
                            </div>
                        </div>
                        <div className="form-group">
                            <label htmlFor="deadline" className="col-sm-2 control-label">Deadline</label>
                            <div className="col-sm-10">
                                <input id="deadline" className="form-control" type="datetime-local" ref="deadline" name="deadline"/>
                            </div>
                        </div>
                        <div className="form-group">
                            <label htmlFor="completed" className="col-sm-2 control-label">Completed</label>
                            <div className="col-sm-10">
                                <input id="completed" className="form-control" type="checkbox" placeholder="completed" ref="completed" name="completed"/>
                            </div>
                        </div>
                        <div className="form-group">
                            <label htmlFor="description" className="col-sm-2 control-label">Description</label>
                            <div className="col-sm-10">
                                <textarea id="description" className="form-control" placeholder="Description" ref="description" name="description"/>
                            </div>
                        </div>
                    </form>
            </Modal>
        );

        return (
            <div className="scheduleentry-modal">
                {modal}
            </div>
        );
    }
});

Other comments and improvements to the code are appreciated.

解决方案

You can use React-Bootstrap (https://react-bootstrap.github.io/components/modal). There is an example for modals at that link. Once you have loaded react-bootstrap, the modal component can be used as a react component:

var Modal = ReactBootstrap.Modal;

can then be used as a react component as <Modal/>.

For Bootstrap 4, there is react-strap (https://reactstrap.github.io). React-Bootstrap only supports Bootstrap 3.

这篇关于React.js 中的 Bootstrap 模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆