Bootstrap Modal in React.js
Brauche ich um zu öffnen ein Bootstrap Modal (durch klicken auf eine Schaltfläche in einer Bootstrap navbar und anderen Orten (zum anzeigen von Daten für eine Komponenteninstanz, dh. mit "Bearbeiten" - Funktion), aber ich weiß nicht, wie dies zu erreichen. Hier ist mein code:
EDIT: Code aktualisiert.
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>
);
}
});
Andere Kommentare und Verbesserungen am code sind geschätzt.
InformationsquelleAutor der Frage | 2015-01-30
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie Reagieren-Bootstrap (https://react-bootstrap.github.io/components/modal). Es ist ein Beispiel für modals zu diesem link. Sobald Sie geladen haben, reagieren-bootstrap, den modal-Komponente eingesetzt werden können, reagieren Komponente:
dann verwendet werden können, als reagieren Komponente
<Modal/>
.Für die Bootstrap-4, es wird reagieren-Gurt (https://reactstrap.github.io). Reagieren-Bootstrap nur unterstützt Bootstrap 3.
InformationsquelleAutor der Antwort Mark
Ich war vor kurzem auf der Suche nach einer netten Lösung ohne Zugabe Reagieren-Bootstrap zu meinem Projekt (als Bootstrap-4 wird demnächst veröffentlicht).
Dies ist meine Lösung: https://jsfiddle.net/16j1se1q/1/
Die Idee dabei ist, nur machen die Modale Komponente in den Reagieren, DOM, wenn es angezeigt werden soll (in der App-Komponenten render-Funktion). Ich halte einige "Ansicht" - Zustand, der angibt, ob die Modalen gerade angezeigt wird oder nicht.
'ComponentDidMount' und 'componentWillUnmount' callbacks entweder ausblenden oder anzeigen des modalen (sobald es gerendert wird in die Reagieren, DOM) über Bootstrap-javascript-Funktionen.
Ich glaube, diese Lösung schön folgt die Reagieren ethos aber Vorschläge sind willkommen!
InformationsquelleAutor der Antwort tgrrr
Habe ich diese Funktion:
Und dann verwendet es auf meinen Auslöser.
Zu 'verstecken' der Modale:
InformationsquelleAutor der Antwort sangress
getDOMNode()
ist veraltet. Stattdessenref
Zugriff auf DOM-element. Hier arbeitet Modalen Komponente (Bootstrap-4).Entscheiden, ob Sie zu zeigen oder nicht zu zeigen, Modale Komponente in der übergeordneten Komponente.
Beispiel: https://jsfiddle.net/sqfhkdcy/
InformationsquelleAutor der Antwort Rinat Rezyapov
Reactstrap hat auch eine Umsetzung der Bootstrap-Modals in Reagieren. Diese Bibliothek Ziele Bootstrap, version 4, in der Erwägung, dass reagieren-bootstrap Ziele der version 3.X.
InformationsquelleAutor der Antwort curran
Können Sie versuchen, diese modal:https://github.com/xue2han/react-dynamic-modal
Es ist zustandslos und kann nur gerendert, wenn Sie benötigt wird.So ist es sehr einfach zu bedienen.Genau wie dieser:
InformationsquelleAutor der Antwort xuehan
Dank @tgrrr für eine einfache Lösung, vor allem, wenn 3rd-party-Bibliothek nicht wollte (wie Reagieren-Bootstrap). Allerdings hat diese Lösung ein problem: modal-container eingebettet reagieren Komponente, die dazu führt,modal-unter-hintergrund Problemwenn außen reagieren-Komponente (oder dem übergeordneten element) hat position Stil als Feste/relative/absolute. Ich traf dieses problem und kam bis zu einer neuen Lösung:
Die Grundidee ist:
InformationsquelleAutor der Antwort shaochuancs
Fügen Sie einfach
href='#scheduleentry-modal'
auf das element, das Sie öffnen wollen, die modal mitOder mit jQuery:
$('#scheduleentry-modal').modal('show');
InformationsquelleAutor der Antwort Rodrigo De Luna