1. 首页
  2. 问题
  3. React.js 中的 Bootstrap 模式
小能豆

React.js 中的 Bootstrap 模式

javascript

我需要通过单击 Bootstrap 导航栏和其他地方的按钮来打开 Bootstrap Modal（以显示组件实例的数据，即提供“编辑”功能），但我不知道如何实现这一点。这是我的代码：

编辑：代码已更新。

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>
        );
    }
});

欢迎对代码提出其他意见和改进。


阅读 51

收藏
2024-06-07

共1个答案

小能豆

  1. 避免在 React 中使用 jQuery：你目前
javascri复制代码class ScheduleEntryListItem extends React.Component {

    constructo
constructor(props) {


super(props);
        this.state = { showModal: false };
    }

    openModal = 

() => {


this.setState({ showModal: true });
    };

    closeModal = 
    };

    closeMo


() => {


this.setState({ showModal: false });
    };


    };

    ren


render() {


const { item } = this.props;

        con
const deadline = moment(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">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <ScheduleEntryModal
                        onClose={this.closeModal}
                        title={item.title}
                        deadline={item.deadline}


            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <ScheduleEntryModal
                        onClose={this.closeModal}
                        title={item.title}
                        deadline={item.dea

            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <ScheduleEntryModal
                        onClose={this.closeModal}
                        title={item.title}
                        deadlin

            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <ScheduleEntryModal
                        onClose={this.closeModal}
                        title={item.title}


            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <ScheduleEntryModal
                        onClose={this.closeModal}
                        title={item.ti

            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <ScheduleEntryModal
                        onClose={this.closeModal}


            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <ScheduleEntryModal
                        onClose={this.closeModal}


            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <ScheduleEntryModal
                        onClose=

            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <ScheduleEntryModal


            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <Sch

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


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


            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadl

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


            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-gro

            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <s

            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>

            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}


            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">


            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">

            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-gro

            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 cl

            <>
                <a className="list-group-item" href="#" onClick={this.openModal}>


            <>
                <a className="list-group-item" href="#" onClick={this.ope

            <>
                <a className="list-group-item" href="#" on

            <>
                <a className="list-group-ite

            <>
                <a className="

            <>
                <a


<>
                <a className="list-group-item" href="#" onClick={this.openModal}>
                    <h5 className="list-group-item-heading">
                        {item.title}
                    </h5>
                    <small className="list-group-item-text">
                        {deadline}
                    </small>
                </a>
                {this.state.showModal && (
                    <ScheduleEntryModal
                        onClose={this.closeModal}
                        title={item.title}
                        deadline={item.deadline}
                    />
                )}
            </>
        );
    }
}
  1. 将数据传递给模态组件：不是直接访问 DOM 元素来获取模态的数据，而是将必要的数据作为 props 传递给组件ScheduleEntryModal。
  2. 组件命名一致性：确保 coModal和 ScheduleEntrScheduleEntryModal`组件
  3. 组件生命周期使用：componentWillUnmount在您当前Modal的
  4. 错误处理：确保 propScheduleEntryList组件的loadData方法。
  5. 可访问性：确保您的模式是

通过遵循这些建议并相应地更新代码，您可以提高可读性、可维护性

2024-06-07