Composants Twitter Bootstrap 3 construits avec ReactJS, pour les applications ReactJS

react-bootstrap...

Donc, fondamentalement, sur la version de bureau, les 4 boutons doivent apparaître en groupes de 2 de manière 2x2. Le problème est que sur mobile, chacun doit avoir chaque ligne individuelle. J'utilise bootstrap pour la manipulation des lignes / colonnes et React pour le front-end. Im travaillant gé....
6 avril 2020 à 23:22
J'ai un tableau d'objets qui contiennent le nom et la description. Le nom est court et peu de caractères. Mais la description peut varier en longueur. Je souhaite afficher ces données dans Cards dans mon projet React. J'ai essayé d'utiliser react-bootstrap. Ce que je veux faire, c'est que je veux mo....
2 avril 2020 à 17:01
Je crée une application de site Web React.js pour un projet universitaire qui utilise Reactstrap ainsi que mon CSS personnalisé. Je viens de remarquer que j'ai un défilement horizontal mais je ne peux pas comprendre d'où il vient. Vous pouvez voir l'espace supplémentaire sur l'image, cela semble êtr....
30 mars 2020 à 21:08
Comment effectuer une fonction par taille d'écran javascript / bootstrap? C'est le div: <div className="col-sm hidden-md hidden-lg"></div> Et je veux régler cette fonction (uniquement sur petit écran): const [ navOpen, setNavOpen ] = useState(true) Le code est en reactjs, comment puis-je appeler une....
22 mars 2020 à 20:32
J'utilise des styled-components pour styliser un React Bootstrap Élément Form.control. J'essaie de déterminer s'il est possible de styliser une entrée en fonction de sa valeur. Par exemple, sans valeur (juste un espace réservé), je voudrais que l'entrée soit grise. Si le champ a une valeur, il doit....
import React, { Fragment } from "react"; import { Container, ListGroup, Card, Button, Row, Col, Nav } from "react-bootstrap"; import Footer from "../Footer"; export const Dashboard = props => { let selectedOption = ""; const handleSelect = evt => { evt.preventDefault(); selectedOption =....
2 janv. 2020 à 19:29
Je suis nouveau pour réagir ainsi à la question. Ceci est mon CustomModal, import React from 'react'; import {useState} from "react"; import {Button, Modal} from "react-bootstrap"; const CustomModal = (props) =>{ const [show, setShow] = useState(true); const handleClose = () => setShow(fals....
J'ai un formulaire en réaction, comment masquer le bouton d'envoi jusqu'à ce que tous les champs aient une valeur? Champ de formulaire: <Form> <Form.Group controlId="textField"> <Form.Control onChange={handleTextValueInput} value={textValue} /> </Form.Group> Bouton....
J'ai une liste, que je montre dans un tableau, puis je mets à jour la dernière colonne en fonction d'une case à cocher. Maintenant, je veux obtenir uniquement les valeurs qui ont été marquées comme vérifiées. J'ai confirmé dans les journaux de ma console que la dernière colonne est mise à jour avec ....
J'ai une case à cocher de style personnalisé et cette case est incluse dans un ensemble de tableaux de données mappés. {nfcArray && nfcArray.map((item, key) => { return ( <tr class="hover"> <td className="cell_style pl-3 pl-lg-5"> <Row noGutters> ....
J'ai une liste que j'ai créée en y ajoutant des éléments: const addToPool = () => { setDiePool([ ...diePool, { dp1 : poolCount, dp2 : diceType, dp3 : diceNumber, dp4 : diceAdjuster } ]); setPoolCount(poolCount+1); }; Maintenant, je ....
J'essayais d'utiliser bootstrap dans mon application react.js, alors voici ce que j'essaie de faire: <ListGroup.Item> {"Ass ".concat(pend.userName)} <div className="myDiv"> <Button variant="success"> Add </Button> ... La raison derrière l'ajout ....
19 déc. 2019 à 15:59
J'écris un style CSS personnalisé dans mypagestyle.styl avec ce qui suit :local .mybutton border-radius: 1px padding: 2px 2px 2px 2px margin: 2px 2px 2px 2px font-size: 14px text-align: center background-color: #4582ec color: #fff tous les styles, à l'exception de la couleur et de l....
18 déc. 2019 à 23:47
Dans un composant React, je génère une liste de <option> pour <select>. Cela se fait dans ComponentDidMount() et est stocké dans l'état local. Cette liste est ensuite rendue. Cependant, chaque <option> est placé entre guillemets doubles, ce qui fait que les options ne sont pas affichées sur la page.....
16 déc. 2019 à 05:48
Je veux ajouter une validation pour les caractères illégaux dans le formulaire d'enregistrement, par exemple pour le champ du nom d'utilisateur. Si dans le champ du nom d'utilisateur se trouve l'un des caractères "!,% & *", Le formulaire n'enverra pas de demande au backend. Je ne sais pas par où com....
12 déc. 2019 à 18:03
J'utilise Leaflet map avec recharts dans ReactJS. Au moment où l'utilisateur clique sur le marqueur de carte, PopUp s'affichera avec six graphiques l'un en dessous de l'autre. Je veux styliser les graphiques deux à deux en trois lignes. Comment styler le code avec css? Le code: {coords.map(({....
6 déc. 2019 à 16:11
Le problème est que je ne sais pas comment appliquer un effet du composant parent au composant enfant ... Je crée une fonction de tri. tableSort = (event, sortKey) => { const {data} = this.state; data.sort((a,b) => a[sortKey].localeCompare(b[sortKey]) ) this.setState({ data }....
Je peux ajouter un bouton avec du texte dans react-bootstrap en utilisant du code comme <Button className={styles.feedbackButtonRating} variant={this.state.liked ? 'success' : 'light'} onClick={this.handleOnLikeClick} > {FEEDBACK_LIKE_BUTTON_TE....
28 nov. 2019 à 11:31
Énoncé du problème : J'ai un composant parent qui affiche les onglets React-Bootstrap. Il y a 2 onglets à l'intérieur du composant Tabs ayant chacun son propre état. J'ai besoin d'effacer l'état des composants enfants lorsque je bascule entre les onglets du composant parent. Par exemple. Mon compos....
22 nov. 2019 à 08:59
<Tabs defaultActiveKey="recent" > <Tab eventKey="recent" title="Recent"> </Tab> <Tab eventKey="popular" title="Popular"> </Tab> <Tab eventKey="all" title="All"> </Tab> <Tab eventKey="category" title="Category"> </Tab> <Tab eventKey="myconversation" title="My Conversation" > </Tab....
J'utilise un bootstrap simple dans reactjs, mais certains des attributs ne fonctionnent pas dans reactjs, alors que dois-je faire....
11 nov. 2019 à 14:00
Je suis nouveau dans ReactJS J'ai créé un composant enfant appelé pied de page et j'ai également installé le package Bootstrap mais je ne reçois aucun style dans le pied de page. Code App.js - import React, { Component }from 'react'; import './App.css'; import Header from './components/header'; impo....
10 nov. 2019 à 15:26
J'ai un formulaire simple qui se compose d'un champ de courrier électronique et d'un champ de mot de passe comme suit <Form noValidate validated={validated} onSubmit={this.handleSubmit}> <Form.Group controlId="formEmail"> <Form.Label>Email addre....
J'utilise react-bootstrap pour mon application. L'icône donnée pour la validation du formulaire ressemble à ceci Code <Form noValidate validated={validated} onSubmit={this.handleSubmit}> <Form.Group controlId="formEmail"> <Form.Label >Email address</Form.Label> <Form.C....
Ran "> npm install react-bootstrap bootstrap" Importé le composant Button de Bootstrap et ajouté à la page. J'obtiens l'erreur ci-dessous. Mon package.json a des entrées ci-dessous pour bootstrap ainsi que d'autres entrées pour react. "react-bootstrap": "^1.0.0-beta.14", "bootstrap": "^4.3.1", impo....
4 nov. 2019 à 09:50