Tag: react-bootstrap

Twitter Bootstrap-3-Komponenten gebaut mit ReactJS, für ReactJS Anwendungen

Reagieren-bootstrap-Akkordeon funktioniert nicht richtig

Anzahl der Antworten 2 Antworten
Ich versuche zu lernen reagieren. Gibt es eine zu gehen, ich war das Experimentieren mit reagieren-bootstrap und war versucht zu implementieren Akkordeon mit reagieren-bootstrap-Akkordeon. Zuerst habe ich versucht, mit ButtonToolBar, es funktionierte. var ButtonToolbar = ReactBootstrap.ButtonToolbar; var

Wie kann Sie bedingt deaktivieren eines Formular-input-in reagieren?

Anzahl der Antworten 1 Antworten
Möchte ich deaktivieren Sie die validiert Eingabe, wenn ein Element entspricht einem bestimmten Kriterien. In diesem Fall, wenn ein Produkt hat eine Förderung. Idealerweise würde ich gerne etwas wie das hier tun: <ValidatedInput className='product-dropdown' onChange={this.onProductChange.bind(this)} defaultValue={example.product_id} componentClass='select'

Wie kann ich dynamisch ändern Sie den Inhalt einer Reagieren Bootstrap-modal?

Anzahl der Antworten 2 Antworten
Ich versuche zu ändern, den Inhalt des modal, nachdem es montiert hat, aber ich bin nicht in der Lage zu finden, die richtigen Knoten zu ändern. Ich habe beigefügten Referenzen auf die Knoten, ich bin daran interessiert

EventKeys in NavDropdown in Reagieren-Bootstrap

Anzahl der Antworten 2 Antworten
Ich habe ein problem mit den eventKey, was in NavDropdowns. var Navigation = React.createClass({ handleSelect: function(eventKey){ console.log(eventKey); }, render: function() { return ( <Navbar brand='Navbar' toggleNavKey={0}> <CollapsibleNav eventKey={0} onSelect={this.handleSelect}> <Nav navbar> <NavItem eventKey={1}>Home</NavItem> </Nav> <Nav navbar right

So zeigen Sie ein modales Dialogfeld in ReactJS?

Anzahl der Antworten 1 Antworten
Ich bin neu in JavaScript und ReactJS. Ich habe eine Anwendung, in dem der Benutzer seine oder Ihre e-mail-Adresse. Dann Ich versuche zu erstellen, den Benutzer-Datensatz. Wenn etwas schief geht, möchte ich die Anzeige ein modal-Fenster mit

die versuchen, zu Reagieren dropdown mit Kontrollkästchen-Optionen im es und es funktioniert nicht richtig

Anzahl der Antworten 2 Antworten
Ich versuche, ein einfaches dropdown mit dropdown-Elemente wie Kontrollkästchen Eingänge. Derzeit habe ich dieses : import React, { Component } from 'react' export default class Sort extends Component { constructor() { super() this.state= { expanded : false}

Füllen Dropdown-Wählen Sie mit Requisiten Reagieren

Anzahl der Antworten 2 Antworten
So, ich bin versucht, zum füllen der dropdown-Liste mit ein paar Infos aus einer anderen Tabelle mit Requisiten. Derzeit haben diese. Ich hatte zu tun, die Schleife nach hinten, denn früher war es zu brechen, import React,

Benutzerdefinierte Reagieren-Bootstrap Popover

Anzahl der Antworten 1 Antworten
Ich möchte erstellen Sie eine benutzerdefinierte reagieren popover, basierend auf Bootstrap Popover, nur mit meinem eigenen design und vielleicht auch mehr Requisiten. Ich habe eine neue reagieren Komponente namens MyTooltip : import React, {Component} from 'react'; import

Reagieren-Bootstrap wodurch die Margen auf der linken und rechten Seite

Anzahl der Antworten 3 Antworten
Ich bin mit Reagieren-Bootstrap in meiner app Reagieren. Es verursacht Rand auf der linken und rechten Seite. Ich bin mit dem folgenden code: import React, { Component } from "react"; import "react-bootstrap/dist/react-bootstrap.min.js"; import "bootstrap/dist/css/bootstrap.min.css"; import { Grid,

Ausbau Zeile innerhalb einer Tabelle mit reagieren-bootstrap

Anzahl der Antworten 3 Antworten
Ich versuche, etwas zu erreichen, wie diese reagieren mit reagieren-bootsrap: http://www.bootply.com/T0v2NlXryW Reagieren meine code jetzt ist, aber nicht funktioniert: <Table> <thead> <tr> <th>Job Name</th> <th>Description</th> <th>Provider Name</th> <th>Region</th> <th>Status</th> </tr> </thead> <tbody> <tr data-toggle="collapse" data-target="#demo1" className="accordion-toggle"> <td>OBS

navbar-fixed-top show-Inhalte hinter der Navbar

Anzahl der Antworten 3 Antworten
Wie verhindern Sie, dass die Inhalte aus schwebenden hinter die Navigationsleiste beim scrollen? <Navbar className="navbar-form navbar-fixed-top" responsive collapseable brand='x' inverse toggleNavKey={1} onClick={this.handleMouseDown}> Oder ist es: <Nav className="navigation".. Dank InformationsquelleAutor Chris G. | 2015-09-01

Vorteile der Verwendung reagieren-bootstrap über bootstrap

Anzahl der Antworten 3 Antworten
Was ist der Punkt in der Verwendung reagieren-bootstrap über plain old Bootstrap? Ich war durch https://react-bootstrap.github.io/components.html und ich sehe keinen Vorteil. Ich kann nur sehen, die es bringen kann unnötige Abhängigkeit zu dem Projekt. Gibt es irgendwelche

Wie man select-element den Wert im reagieren-bootstrap?

Anzahl der Antworten 8 Antworten
So, ich versuche, einen select element Wert in reactjs, aber einfach nicht es herauszufinden. Die this.refs.selectElement.getDOMNode().value immer als undefined. Alle anderen Steuerelemente auf der form wie text funktionieren. Irgendwelche Ideen? Ist es, dass Sie nicht bekommen kann

Wie erstelle ich eine dynamische drop-down-Liste mit reagieren-bootstrap

Anzahl der Antworten 6 Antworten
Beispiel code im reagieren-bootstrap-Website zeigt die folgenden. Fahren muss ich die Optionen mit einem array, aber ich habe Probleme bei der Suche Beispiele kompilieren. <Input type="select" label="Multiple Select" multiple> <option value="select">select (multiple)</option> <option value="other">...</option> </Input> InformationsquelleAutor JohnL

Reagieren-Bootstrap ziehen der rechten Navigationsleiste

Anzahl der Antworten 3 Antworten
Ich bin mit react-bootstrap für das styling meiner website. Ich möchte hinzufügen Navbar wo alle Elemente sind auf der rechten Seite gespiegelt. export default class XNavbar extends React.Component { render() { return ( <Navbar inverse fluid >

Reagieren-Bootstrap-Import NavBar-Modul

Anzahl der Antworten 2 Antworten
Ich versuche einige code aus dem Reagieren-Bootstrap-Dokumentation in meine Reat-Projekt (mit Bootstrap erstellen-reagieren-app). Aber ich habe ein problem mit diesen Boostrap "sub-Komponenten" wie NavBar.Header Dies ist mein code: import React, {Component} from 'react'; import {NavBar, Nav, NavItem}

Holen Sie Reagieren auf die Anzeige der einzelnen Fehlermeldungen unter Formular-input-Feld

Anzahl der Antworten 1 Antworten
Ich bin ein Formular, dass gibt ein array von Fehlern und ich habe Schwierigkeiten, herauszufinden, wie man jeden einzelnen Fehler angezeigt werden, unter den richtigen input Feld. Jetzt alle Fehler drucken unter jedem Eingabefeld. Ich bin mit

Ändern Sie den text Farbe des reagieren-bootstrap Navbar mit webpack

Anzahl der Antworten 2 Antworten
Ich bin neu in web-Entwicklung, und ich versuche, passen Sie die Farben reagieren-bootstrap Navbar. Dies ist der Inhalt meiner NavbarComponent.cs-Datei: var React = require('react'); var ReactDOM = require('react-dom'); import Navbar from 'react-bootstrap/lib/Navbar'; import Nav from 'react-bootstrap/lib/Nav'; import

Reagieren bootstrap-nav-bar-styling

Anzahl der Antworten 3 Antworten
Ich versuche herauszufinden, wie kann ich mich bewerben styling zu einem reagieren bootstraps NavBar. Hinzugefügt jsfiddle hier. https://jsfiddle.net/pdqzju1e/1/ Mit einigen Problem bei der Ausführung der jsfiddle mit reagieren-bootstrap. Funktioniert auf meinem lokal einrichten Umgebung. const navbar =

reagieren bootstrap tooltip, wie mache ich Feuer?

Anzahl der Antworten 3 Antworten
Hinzugefügt haben, einen tooltip und Auslöser für meine Komponente, wie bekomme ich es auf das Feuer der tooltip? erforderlichen Module wie diese: var Icon = require('./Icon'), Tooltip = require('./Tooltip'), Button = require('react-bootstrap').Button, OverlayTrigger = require('react-bootstrap').OverlayTrigger; getTooltip: function()

Wie man mehrere ausgewählte Optionen Wert Reagieren JS?

Anzahl der Antworten 5 Antworten
<Multiselect label='Select College' ref="collegeList" onChange={this.handleChange} multiple > <option value='college1'>college1</option> <option value='college2'>college2</option> </Multiselect> Diese Komponente ist von https://github.com/skratchdot/react-bootstrap-multiselect Was geschrieben werden sollte innerhalb der handleChange () - Funktion ? Können Sie versuchen zu tun handleChange: function (event) {

Wie zu Bekommen: Komponente Breite Nach Rendern in Reagieren

Anzahl der Antworten 3 Antworten
Ich versuche zu schaffen, eine Allgemeine Komponente, dass ich die Wiederverwendung in anderen Anwendungen. Ich muss wissen, die Breite der Komponente nach dem Rendern, also kann ich die ändern des Inhalts der Komponente. Ich habe versucht, die

Ansprechende Tisch-Höhe Bootstrap

Anzahl der Antworten 1 Antworten
Wie kann ich machen, Tischhöhe zu reagieren, wenn innerhalb von row-element? In dieser Zeile element gibt es zwei Tabellen und einem Bild, so dass die Zeilenhöhe festgelegt ist, passen in dieses Bild. Oder vielleicht gibt es eine

Wie passen reagieren-bootstrap-Komponenten?

Anzahl der Antworten 2 Antworten
Was ist der beste Weg, um überschreiben von css-Klassen/anpassen reagieren-bootstrap-Komponenten? - (Ich habe Lesen in der Dokumentation nach, und es sei denn, ich bin fehlt etwas, das ist nicht bedeckt). Von dem, was ich gelesen habe, scheint

Festlegen der z-index auf eine Komponente?

Anzahl der Antworten 4 Antworten
Versucht, mit der 'zindex' requisite, wie hier vorgeschlagen: https://github.com/facebook/react/issues/1456 <Input ref="username" type="text" label="Username" placeholder="Enter username" zindex={1} /> Nicht funktioniert. Habe auch versucht 'zindex="1"' Irgendwelche Ideen? InformationsquelleAutor Robert Kovačević | 2015-11-27

reagieren mit reagieren-bootstrap. Wie Sie es verwenden?

Anzahl der Antworten 0 Antworten
Ich habe gerade angefangen zu erkunden reagieren und versuchen zu verstehen, wie verwende ich reagieren-bootstrap wenn installiert über bower folgte ich nur der getting-started-Teil, aber ich verstehe nicht wirklich, wie funktioniert funktionieren sollte. hier habe ich mein

Modul nicht gefunden: Error: Can ' T resolve 'reagieren-bootstrap-Validierung"

Anzahl der Antworten 1 Antworten
Problem Ich bekomme immer folgenden Fehler im webpack Error: Cannot find module 'react-bootstrap-validtion' at Function.Module._resolveFilename (module.js:339:15) at Function.Module._load (module.js:290:25) at Module.require (module.js:367:17) at require (internal/module.js:20:19) Habe ich verwiesen wird oder installiert ist das Modul falsch? Dies ist,

Bootstrap, können Sie deaktivieren die Anzeige flex?

Anzahl der Antworten 3 Antworten
Habe ich den folgenden css-das ist brechen meine layouts: @media (min-width: 768px) .row { display: flex; } Kann ich deaktivieren Sie die Anzeige flex-Regel? Kann mir jemand erklären, warum dies passiert? Update: Derzeit mit boostrap-sass, "bootstrap-sass": "~3.3.5"

Geben Sie ein/Legen Sie die Breite und Höhe auf einen reagieren-boostrap modal

Anzahl der Antworten 1 Antworten
Wie kann ich eine dynamische Breite und Höhe, um einen reagieren-bootstrap-modal-Fenster? Ich habe die reagieren-bootstrap docs hier aber konnte nicht herausfinden, wie das zu tun. Tatsächlich wird der Wert von Breite und Höhe Requisiten wäre dynamisch (alle

Wie Sie einen Klassennamen/id zu Reagieren-Bootstrap-Komponente?

Anzahl der Antworten 2 Antworten
Nehmen wir an, wir sind mit Reihe von Reagieren-Bootstrap..., Wie wir es Stil ohne Verwendung einer Hülle oder innere element: <Row> <div className='some-style'> ... </Row> Idealerweise könnten wir gerade tun: <Row className='some-style> ... </Row> Aber das funktioniert

Ändern der Stil von klicken Sie auf eine Schaltfläche auf

Anzahl der Antworten 2 Antworten
Ist es möglich, zu ändern background-color von my button onClick Funktion? ex. klicken Sie auf background-color: black ist, ein Klick background-color: white Habe ich versucht, so etwas wie this.style, kein Ergebnis. Habe ich es geschafft, overlay arbeiten

Schaltfläche "hinzufügen" in einen reagieren-bootstrap-Tabelle

Anzahl der Antworten 2 Antworten
Ich bin mit reagieren-bootstrap-Tabelle (var ReactBsTable = require("react-bootstrap-table")). Ich möchte eine Spalte hinzufügen, die nur enthalten eine Schaltfläche in einem bootstraptable . Jede Idee, vielen Dank. <BootstrapTable data={this.state.activities} pagination={true} hover={true} search={true} selectRow={selectRowProp} options={options}> <TableHeaderColumn isKey={true} dataField="id" hidden

Die Angleichung Reagieren-Bootstrap

Anzahl der Antworten 1 Antworten
Ich bin ziemlich neu in Reagieren-Bootstrap (und front-end-Arbeit im Allgemeinen). Was ist die beste Praxis für das ausrichten von Elementen bei der Verwendung Reagieren-Bootstrap? Beispiel: <Grid> <Row className="show-grid"> <Col md={10}> <Input type="text" label="Filter"/> </Col> <Col md={2}> <Button>Clear</Button>

Wie man Werte/Eigenschaften, die von einem reagieren-bootstrap-checkbox?

Anzahl der Antworten 2 Antworten
Ich versuche, die reagieren-bootstrap-checkbox (https://react-bootstrap.github.io/components.html#forms-controls) und ich brauche, um ein Ereignis auszulösen, wenn es seinen Zustand ändert. Es wäre auch toll, in der Lage sein zu Programm un/check und/oder sagen, ob es aktiviert ist. Leider, wenn der

Setzen Sie den Fokus auf einen reagieren-bootstrap.Eingabefeld mit refs.x.getDOMNode.Fokus

Anzahl der Antworten 4 Antworten
Den JSX: var Button = require("react-bootstrap").Button; var Input = require("react-bootstrap").Input; var MyClass = React.createClass({ onclick: function () { this.refs.email.getDOMNode().focus(); console.log('DOM element', this.refs.email.getDOMNode()); } render: function () { return ( <div> <Button onClick={this.onlick}>Login</Button> <Input ref='email' type='email' /> </div>

reagieren bootstrap readonly input in formcontrol

Anzahl der Antworten 1 Antworten
Ich bin mit reagieren bootstrap und dieses framework bietet einige nette FormControls. Aber ich möchte das Input Feld generiert wird innerhalb der FormControls zu haben, eine Stütze der readonly="readonly". So, das Feld sieht genauso aus, wie meine

Kann nicht senden Sie das Formular reagieren-bootstrap

Anzahl der Antworten 3 Antworten
Habe ich Folgendes react-bootstrap Komponente: <FormGroup onSubmit={this.gotEmail} role="form"> <FormControl type="text" className="form-control"/> <Button className="btn btn-primary btn-large centerButton" type="submit">Send</Button> </FormGroup> Ich würde gerne in der form vorgelegt werden, wenn ich auf die Schaltfläche "Senden". Jedoch, wenn ich auf die

Get file-Objekt aus der Datei Input

Anzahl der Antworten 5 Antworten
Ich versuche, ein reagieren-bootstrap-Datei-Eingabe mit jquery fileupload(). Mit gerade jquery würde ich tun $('#fileUpload').prop('files') um die Dateien zu passieren, um den fileupload nennen. Allerdings weiß ich nicht, wie man die Dateien richtig mit reagieren-bootstrap. <Input type='file' label='Upload'

reagieren-bootstrap-Schaltergruppe als radio-buttons

Anzahl der Antworten 4 Antworten
Ich versuche eine Gruppe zu reagieren-bootstrap-buttons in einer radio-button-set. Ich kann dies ganz einfach mit der bootstrap mit <input type="radio"> Elemente, aber kann nicht herausfinden, wie dies mit reagieren-bootstrap. Der folgende code ermöglicht es dem Benutzer, alle

Enter-Taste event-handler reagieren auf-bootstrap-Eingabe-Komponente

Anzahl der Antworten 3 Antworten
Ich habe eine Input - Komponente ein button (buttonAfter Eigenschaft), habe ich eine onClick - handler verknüpft, der button und so Benutzer kann einen text eingeben, und klicken Sie die Taste, um das Feuer die richtige Maßnahme.

Wie kann man einen input-Wert mit "refs" reagieren-bootstrap-form?

Anzahl der Antworten 4 Antworten
Ich versuche ein Formular erstellen, dass erscheint in modalen. Also, wenn der Benutzer einen Wert eingeben, dieser Wert wird gespeichert in dem lokalen Speicher. Hier ist ein Bild, das helfen Sie zu verstehen, was ich meine: Hier

reagieren-bootstrap mit webpack

Anzahl der Antworten 1 Antworten
Ich bin versucht, zu reagieren-bootstrap mit web pack. Ich bin in der Lage, eine bootstrap - <Button> auf einer Seite, aber es gibt keine Stile befestigt? Ich habe installiert: "devDependencies": { "babel-core": "^5.1.11", "babel-loader": "^5.0.0", "css-loader": "^0.12.1",

Hören Sie den Tastendruck für das Dokument in reactjs

Anzahl der Antworten 2 Antworten
Ich soll binden zum schließen des aktiven reagieren bootstrap popover auf escape drücken .Hier ist der code _handleEscKey:function(event){ console.log(event); if(event.keyCode == 27){ this.state.activePopover.hide(); } }, componentWillMount:function(){ BannerDataStore.addChangeListener(this._onchange); document.addEventListener("click", this._handleDocumentClick, false); document.addEventListener("keyPress", this._handleEscKey, false); }, componentWillUnmount: function() {

Wie man react-bootstrap modal programmgesteuert öffnet / schließt?

Anzahl der Antworten 3 Antworten
Brauche ich um zu öffnen/schließen, modale wie $(element).modal('show') Wie zu tun? InformationsquelleAutor der Frage Igor Babkin | 2015-04-06