标签: react-bootstrap
如何关闭 React Bootstrap Carousel 的自动播放？
我在将 React Bootstrap 的轮播设置为不自动播放时遇到问题。
这是我现在的代码：
import React from 'react';
import Carousel from 'react-bootstrap/Carousel';
import pigment1 from '../images/design-images/pigment/page1.jpeg';
import pigment2 from '../images/design-images/pigment/page2.jpg';
import pigment3 from '../images/design-images/pigment/page3.jpg';
import './DesignProjects.css';
function DesignProjects(props) {
return (
<section>
<h2>Design Work</h2>
<div className='design-project'>
<h3>Pigment Website Redesign</h3>
<Carousel interval={false}>
<Carousel.Item>
<img className='d-block w-100' src={pigment1} alt='First slide' />
</Carousel.Item>
<Carousel.Item>
<img className='d-block w-100' src={pigment2} alt='Third slide' />
</Carousel.Item>
<Carousel.Item>
<img className='d-block w-100' src={pigment3} alt='Third slide' />
</Carousel.Item>
</Carousel>
</div>
</section>
);
}
export default DesignProjects;
根据我读到的内容，我需要将间隔设置为 false...但我尝试这样做的每一种方法都会导致出现错误或轮播在图像中更快地循环。上面是我尝试的最后一种方法，但它再次不起作用，而是循环得更快。 …
推荐指数
解决办法
查看次数
Bootstrap 行导致水平滚动条
我有个问题：
我想创建一个 chatwebapp 并使用 Bootstrap 进行布局。不幸的是，通过以下代码，我得到了一个不应该存在的水平滚动条。我使用列和行，我知道 bootstrap css 中有一个填充，但是当我尝试删除它时，什么也没有发生，滚动条仍留在那里。也许你们可以帮助我。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<div class="row">
<div class="col-md-12">
<div>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">
Navbar w/ text
</a>
<button
class="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarText"
aria-controls="navbarText"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">
Home <span class="sr-only">(current)</span> …推荐指数
解决办法
查看次数
如何获取 React-bootstrap 复选框的当前状态？（无论是否签到）
我正在使用React Bootstrap Check Form。我正在使用表单复选框来捕获输入值。我想获取有关反应状态变量中复选框的信息。
我希望e.target.valueofonClick应打印复选框的当前状态，即它是打开还是关闭（无论是否选中）。但这并没有发生。当我多次切换复选框按钮时，即使复选框已关闭，的值e.target.value仍保持为。on
<Form.Group>
<Form.Check type={"checkbox"}>
<Form.Check.Input
type={"checkbox"}
defaultChecked={true}
onClick={(e) => {
console.log(e.target.value);
}}
/>
<Form.Check.Label>Awesome checkbox here..</Form.Check.Label>
</Form.Check>
</Form.Group>
如何在React端逻辑中获取复选框是否被选中的状态？
推荐指数
解决办法
查看次数
如何在将它显示在DOM上之前定位和调整React Bootstrap Tooltip的大小？
我有一个反应引导工具提示,除非我靠近窗口的边缘,否则效果很好.在这种情况下,我希望工具提示不会被切断,但需要调整大小以适应全文并在所有方面都有边框.
我还希望工具提示箭头指向触发元素的正上方(在我的例子中是'i'图标).
我的猜测是,这需要ReactBootstrap.Tooltip在渲染后使用DOM .我需要能够计算它的当前大小和窗口顶部和左侧偏移位置,然后重新定位/重新调整大小.
这是我当前的代码(在CoffeeScript中):
define [
'jquery',
'es6-shim',
'react',
'react-bootstrap'
], ($, _shim, React, ReactBootstrap) ->
{div, i, h2} = React.DOM
ToolTipHint = React.createFactory(
React.createClass
render: ->
tooltip = ReactBootstrap.Tooltip className: 'hint-content',
h2 className: 'hint-title', @props.fieldName
div className: 'hint-text', @props.tooltip
ReactBootstrap.OverlayTrigger(
trigger: ['hover']
placement: 'top'
overlay: tooltip
delayShow: 300
deplayHide: 150,
div className: 'hint-icon-container',
i className: 'gg-icon-tooltip hint-icon'
)
)
这是问题的截图:
我该如何解决这个问题？
推荐指数
解决办法
查看次数
如何在React JS中获得多个选定的选项值？
<Multiselect label='Select College' ref="collegeList" onChange={this.handleChange} multiple >
<option value='college1'>college1</option>
<option value='college2'>college2</option>
</Multiselect>
该组件来自https://github.com/skratchdot/react-bootstrap-multiselect
在handleChange()函数中应该写什么？
推荐指数
解决办法
查看次数
我应该使用React-Bootstrap而不是Bootstrap
我试图找到任何理由为什么我应该使用react-bootstrap:
<Row componentClass="header" className="panel panel-default">
someBlocks
</Row>
而不是仅仅在jsx中使用bootstrap:
<header className="row panel panel-default">
someColBlocks
</header>
有时候使用Bootstrap更容易.也许我只是不知道什么？
推荐指数
解决办法
查看次数
如何更新按钮标题？
<DropdownButton bsStyle="default" title="No caret" noCaret id="dropdown-no-caret">
<MenuItem eventKey="1">Action</MenuItem>
<MenuItem eventKey="2">Another action</MenuItem>
<MenuItem eventKey="3">Something else here</MenuItem>
<MenuItem eventKey="4">Separated link</MenuItem>
</DropdownButton>
我从react-bootstrap组件示例中获取了这个示例,https://react-bootstrap.github.io/components.html#btn-dropdowns-nocaret
当选择其中一个菜单项时,如何更新按钮标题？
推荐指数
解决办法
查看次数
带FontAwesome子元素的Button使按钮目标值不确定
我似乎无法弄清楚如何解决这个问题，如果您单击带有子图标fontawesome的react-bootstrap按钮，该按钮onclick target value将是未定义的。
但是，如果您仅在带有图标的文本外部单击并且仍在按钮内部，则onclick处理程序仍将起作用。
推荐指数
解决办法
查看次数
试图使一个带有复选框选项的React下拉列表正常工作
我正在尝试使用下拉菜单项作为复选框输入进行简单的下拉菜单。目前我有这个：
import React, { Component } from 'react'
export default class Sort extends Component {
constructor() {
super()
this.state= { expanded : false}
}
showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
this.state.expanded = true;
} else {
checkboxes.style.display = "none";
this.state.expanded = false;
}
}
render() {
return (
<form>
<div class="multiselect">
<div class="selectBox" onclick="showCheckboxes()">
<select>
<option>Select an option</option>
</select>
<div class="overSelect"></div>
</div>
<div id="checkboxes">
<label for="one"><input type="checkbox" id="one"/>First checkbox</label>
<label for="two"><input type="checkbox" id="two"/>Second checkbox …推荐指数
解决办法
查看次数
覆盖从NPM @Types下载的V2.2.2中的TypeScript类型
我正在使用组件react-router-bootstrap和DefinitelyTyped中的定义.我的问题是下载的定义与组件不匹配.我已经创建了一个拉取请求来解决这个问题,但由于我不知道它何时会被修补,我必须覆盖它.我不能只编辑位于node_modules\@types本地的类型定义文件,因为我们是一个团队,正在处理这个项目并且node_modules没有签入该文件夹.
如何覆盖类型定义？我只是不想覆盖LinkContainer.d文件,因为其他文件工作.
拉请求:
https://github.com/DefinitelyTyped/DefinitelyTyped/pull/16600
我试图创建一个LinkContainer.d.ts在我的typings文件夹中命名的文件,该文件是正确的,但它不会被拾取.在同一个文件夹中,我有一个global.d.ts接口,可以很好地接收.
/// <reference types="react-router-bootstrap" />
import { ComponentClass } from "react";
import { NavLinkProps } from "react-router-dom";
type LinkContainer = ComponentClass<NavLinkProps>;
declare const LinkContainer: LinkContainer;
export default LinkContainer;
推荐指数
解决办法
查看次数
标签 统计
react-bootstrap ×10
reactjs ×9
bootstrap-4 ×2
checkbox ×1
css ×1
html ×1
javascript ×1
meteor ×1
typescript ×1