React.js中的Bootstrap模式 [英] Bootstrap modal in React.js
本文介绍了React.js中的Bootstrap模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要通过单击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-brandhref =＃>
< span className =glyphicon glyphicon-eye-open>< / span>
< / a>
< / div>
< form className =navbar-form navbar-left>
< button className =btn btn-primarytype =buttondata-toggle =modaldata-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>用户名和LT; / A>< /锂>
< / ul>
< / div>
< / nav>
）;
}
}）;
ScheduleEntryList = React.createClass（{
getInitialState：function（）{
return {data：[]}
}，
loadData：function（）{
$ .ajax（{
url：/ api / tasks，
dataType：json，
success：function（数据）{
this.setState（{data：data}）;
} .bind（this），
错误：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 =列表组>
< a className =list-group-item active>
< h5 className =list-group-item-heading>即将到来< / h5>
< / a>
{item}
< / div>
）;
}
}）;
ScheduleEntryListItem = React.createClass（{
openModal：function（）{
$（＃scheduleentry-modal）。modal（show）;
}，
渲染：function（）{
deadline = moment（this.props.item.deadline）.format（MMM Do YYYY，h：mm A）;
return（
< a className =list-group-itemhref =＃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）;
}，
关闭：function（）{
$（this.getDOMNode（））。modal（hide）;
}，
渲染：function（）{
return（
< div id =scheduleentry-modalclassName =modal fadetabIndex = - 1>
< div className =modal-dialog>
< div className =modal-content>
< div className =modal-header>
< button type = buttonclassName =closedata-dismiss =modal>
<跨度>&安培;倍;< /跨度>
< / button>
< h4 className =modal-title> {this.props.title}< / h4>
< / div>
< div className =modal-body>
{this.props.children}
< / div>
< div className =modal-footer>
< button type =buttonclassName =btn btn-danger pull-leftdata-dismiss =modal>删除< / button>
< button type =buttonclassName =btn btn-primary>保存< / button>
< / div>
< / div>
< / div>
< / div>
）
}
}）;
ScheduleEntryModal = React.createClass（{
render：function（）{
var modal = null;
modal =（
< Modal title = 添加计划条目>
< form className =form-horizontal>
< div className =form-group>
< label htmlFor =title className =col-sm-2 control-label>标题< / label>
< div className =col-sm-10>
< input id =title className =form-controltype =textplaceholder =Titleref =titlename =title/>
< / div>
< / div>
< div className =form-group>
< label htmlFor =deadlineclassName =col-sm-2 control-label>截止日期< / label>
< ; div className =col-sm-10>
< input id =deadlineclassName =form-controltype =datetime-localref =deadlinename =deadline/>
< / div>
< / div>
< div className =form-group>
< label htmlFor =completedclassName =col-sm-2 control-label>已完成< / label>
< div className =col-sm-10>
< input id =completedclassName =form-controltype =checkboxplaceholder =completedref =completedname =completed/>
< / div>
< / div>
< div className =form-group>
< label htmlFor =descriptionclassName =col-sm-2 control-label>描述< / label>
< div className =col-sm-10>
< textarea id =descriptionclassName =form-controlplaceholder =Descriptionref =descriptionname =description/>
< / div>
< / div>
< / form>
< / Modal>
）;
return（
< div className =scheduleentry-modal>
{modal}
< / div>
）;
}
}）;
对代码的其他评论和改进表示赞赏。
解决方案
您可以使用React-Bootstrap（ https： //react-bootstrap.github.io/components/modal ）。该链接有一个模态示例。一旦加载了react-bootstrap，模态组件就可以用作反应组件：
var Modal = ReactBootstrap.Modal;然后可以将。
<$ code>< b $ b< $模态/>
对于Bootstrap 4，有反应带（ 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>×</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屋！
查看全文
