react-bootstrap 相关问题

当输入字段突出显示时，如何从 FormControl 中删除轮廓？ （反应引导）

所以，我正在尝试制作一个搜索栏，并在下拉列表中提供一些建议。我正在使用 React-bootstrap。现在，我想对其进行样式设置，使其从页面的一侧移动到另一侧，但留有边距...

错误 - 模式属性值不是有效的正则表达式

我收到错误 模式属性值 [a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/ =?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+ [a-z0-9](?:[a-z0-9-]*[a-z0-9])? 不是...

模式属性值不是有效的正则表达式错误

我收到错误 模式属性值 [a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/ =?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+ [a-z0-9](?:[a-z0-9-]*[a-z0-9])?不是有效的

带路由的条件图像

我有一条回家路线和一条聊天路线。当我转到聊天路线时，我想在导航栏中看到不同的图像 这是代码： 从“react-bootstrap”导入{Container，Nav，Navbar}； 我...

是否可以将React Bootsrap ProgressBar的标签居中？

我正在使用 React-Bootsrap ProgressBar，我注意到该组件根据其值对齐其标签： 进度条示例 我想知道是否可以将标签居中，无论其

在 React Bootstrap 5 中添加额外的网格大小

是否可以添加额外的大小来反应引导程序？ 现在引导程序大小如下： WPW 集装箱最大宽度 SX < 576px - none sm > 567 像素 - 540 像素 md > 768px - 720...

使用react-bootstrap表进行分页

我正在使用create-react-app和react-bootstrap构建一个基本的react应用程序。我正在使用表格来显示来自react-bootstrap https://react-bootstrap.github.io/components/table/的信息。我...

React Bootstrap 中的可滚动 div

我正在尝试制作一个可滚动的聊天消息容器，但它不起作用 我尝试了样式、其他库和几乎所有的东西，但它仍然不起作用 这是它的代码 // 库 常量

要重定向到其他组件，我必须单击按钮两次才能使其工作

我有一个存在主义问题！我不明白为什么当我想重定向到组件中的其他页面时，我必须单击按钮两次才能正常工作！代码工作正常！就是这样

使用JS自定义交互式导航栏，不起作用

我正在尝试使用react-js 编写一个包含四个页面（主页、关于、Mint、画廊）的铸币网站。我使用了react-bootstrap来生成指向“NavBar.js”中每个单独页面的链接...

我无法使用ReactJS Bootstrap更改容器的宽度、高度、边框、输入字段和按钮。但颜色和字体改变了

我喜欢使用reactjs创建注册页面，并且我可以使用react-bootstrap作为CSS。我可以添加元素的字体、样式和颜色。但我无法改变容器、按钮和我的大小...

react bootstrap offcanvas 自定义关闭按钮

我使用 bootstrap 使用 offcanvas 进行 React 工作。现在我想添加一个自定义关闭按钮，但它似乎不起作用。请指导我做错了什么。 我使用 bootstrap 使用 offcanvas 进行 React 工作。现在我想添加一个自定义关闭按钮，但它似乎不起作用。请指导我做错了什么。 <Offcanvas show={show} placement="bottom" onHide={handleClose} {...props} className={css["offcanvas-bottom"]} > <Offcanvas.Header className="p-0"> <button type="button" class="btn-close text-reset new_close" data-bs-dismiss="offcanvas" aria-label="Close"></button> <div className={css["pop-image"]}> <Image src="https://xxxxxxx/2022030117344459.jpg" fluid /> </div> </Offcanvas.Header> <Offcanvas.Body> Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc. </Offcanvas.Body> </Offcanvas> 我在自定义按钮中使用了 onClick。并通过执行以下操作切换状态 const toggleOffcanvas = () => setShow(!show) 示例： function ToggleSidebarOffcanvas(){ const [show, setShow] = useState(false); const toggleOffcanvas = () => { setShow(!show); }; return ( <Button onClick={toggleOffcanvas}> Menu <SidebarOffcanvas show={show} toggleOffcanvas={toggleOffcanvas} /> </Button>) } function SidebarOffcanvas({ show, toggleOffcanvas }) { return ( <Offcanvas className="w-25" show={show} scroll={true} backdrop={false}> <Offcanvas.Header className="p-0" style={{ backgroundColor: "#008069", color: "white", }} > <Offcanvas.Title> <div className="d-flex align-items-end w-100 mb-2 lh-1" > <div className="p-2" onClick={toggleOffcanvas}> <FiArrowLeft /> </div> <h5 className="ms-3">Profile </h5> </div> </Offcanvas.Title> </Offcanvas.Header> <Offcanvas.Body> <div > ... </div> </Offcanvas.Body> </Offcanvas> ); } 前几天遇到这个问题，大部分内容都在回应@Shlomo。看来您已经差不多了，但错过了 onClick()。 这是一个简化的示例： const Sidebar = () => { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <> <Button variant="primary" onClick={handleShow}> Launch </Button> <Offcanvas show={show} onHide={handleClose}> <Offcanvas.Header> <Offcanvas.Title>Offcanvas</Offcanvas.Title> <Button onClick={handleClose}>Custom Close Button</Button> </Offcanvas.Header> <Offcanvas.Body> ...Your body... </Offcanvas.Body> </Offcanvas> </> ); }; export default Sidebar; 希望这有帮助，React-bootstrap Offcanvas 的文档让我们推断出这种行为。

ReactJs 复选框在首次使用后不会更改值

我有一个包含各种表单元素的大型表单，这些表单元素是根据 get 请求动态呈现的。所有其他类型的表单（例如文本和选择）都工作正常，但复选框却不然。 啊...

停止模态在外部点击时关闭

有什么办法可以使单击容器外部时保持模态框打开吗？ 我有一个密码更改屏幕，我需要仅在单击“提交”时关闭模态...

如何在旧类上覆盖 tailwind 类，例如 css 中的 !important

我在中使用了text-[20px]，但它被另一个css类覆盖了，我如何覆盖tailwind类 我在text-[20px]中使用了<Badge/>，但它被另一个css类覆盖了，我如何覆盖tailwind类 <Badge label="1" className='w-[30px] h-[30px] p-6 ml-4 text-[20px]' style={{ lineHeight: '20px'}}> 1 </Badge> 如果你想覆盖其他类上的text-[20px]，你可以这样编写类： <Badge label="1" className='w-[30px] h-[30px] p-6 ml-4 [&&]:text-[20px]' style={{ lineHeight: '20px'}}> 1 </Badge>

使用 webpack 更改 React-bootstrap 导航栏的文本颜色

我正在尝试自定义反应引导导航栏的颜色。 这是我的 NavbarComponent.cs 文件的内容： var React = require('react'); var ReactDOM = require('react-dom'); 导入导航栏...

React onClick 事件在引导下拉菜单上不起作用

我正在尝试在 React 中实现一个下拉菜单。 位于我的组件的 return() 内部。 我正在尝试在 React 中实现一个下拉菜单。 <Dropdown></Dropdown> 位于我组件的 return() 内部。 <Dropdown> <Dropdown.Toggle className="btn btn-dark"> <i onClick={() => handleToggle()}>{icons['Menu']}</i> </Dropdown.Toggle> <Dropdown.Menu className="nav-container border-secondary-subtle border border-3"> <Dropdown.Item href="#" className="nav-items"> Dashboard </Dropdown.Item> <Dropdown.Item href="#" className="nav-items"> Courses </Dropdown.Item> </Dropdown.Menu> </Dropdown> import { Dropdown } from "react-bootstrap"; import React, { useState } from 'react'; const [showDropdown, setShowDropdown] = useState(false); const handleToggle = () =>{ setShowDropdown(!showDropdown); console.log(showDropdown) } 当前行为：单击“菜单”图标时，“Dropdown.Menu”选项可见。但再次单击菜单图标时，它不会被隐藏。 我尝试将 onClick 设置为 Dropdown.Toggle 和 Dropdown。两者都不工作。但在控制台中，我可以看到每次单击时 showDropdown 翻转的值。 我也在 onClick = {()=>setShowDropdown(!showDropdown)} 中尝试过这个 我在一些示例中看到他们没有使用任何事件监听器，但这对我也有用。 此外，我希望单击任何菜单项后菜单不可见。 如有任何帮助，我们将不胜感激。谢谢你。 我解决了这个问题。我在班级中添加了一个display:blocknav-container。删除此选项后，下拉列表可以按预期工作，无需任何侦听器。

.react-bootstrap 上的flex-grow-1 <Row> 未填充垂直空间

我正在努力在Bootstrap 4.6.0（使用react-bootstrap 1.5.2）中获取.flex-grow-1，以使布局上的组件扩展以填充剩余的可用垂直空间。 “引导”：...

我怎样才能让react-bootstrap表单组件与同名的formik组件很好地配合工作？

首先，我制作了一个用formik验证的表格。之后，我的团队决定使用 React-Bootstrap 进行样式设计。这个库有一个 对象，与 Formik 相同。但它没有验证正确... 首先，我制作了一个用formik验证的表格。之后，我的团队决定使用 React-Bootstrap 进行样式设计。这个库有一个 <Form> 对象，与 Formik 相同。但它没有正确验证。它要么始终将输入字段视为无效，从而将其边框设为红色，要么始终将输入字段视为正确。 我怀疑这是一个组合库的问题，这些库既适用于表单，又具有同名的组件。我设法让它与原始引导库一起工作。但我还是想知道为什么会发生这种情况以及是否有解决方案。 import React, {useState} from 'react'; import '../FormStyles.css'; import * as yup from "yup"; import { Formik, Form, ErrorMessage, Field } from 'formik'; const TestimonialForm = ({ testimonial = null }) => { const initialValues = { name: testimonial?.name || "", description: testimonial?.description || "", image: testimonial?.image || "" }; const schema = yup.object().shape({ name: yup.string().min(4, "Name must be at least 4 characters long.").required("You have to provide a name."), description: yup.string().required("You have to provide a description."), image: yup.string() .matches( /\.(jpg|png)$/, "We only support .png or .jpg format files." ) .required("You have to provide an image.") }); <Formik initialValues= {initialValues} validationSchema = {schema} > 这是带有 Formik 组件的表单 {({}) => ( <div> <Form className="form-container"> <Field className="input-field" type="text" name="name" placeholder="Testimonial title"/> <ErrorMessage name="name" /> <Field className="input-field" type="file" name="image" placeholder="Testimonial image"/> <ErrorMessage name="image" /> <button className="submit-btn" type="submit">Send</button> </Form> </div> )} </Formik> 这里是react-bootstrap组件（我只更改导入值。）这是那些验证不好的组件。 {({touched, errors}) => ( <div> <Form className="form-container" onSubmit={onSubmit}> <Form.Group controlId="name"> <Form.Control className="input-field" type="text" name="name" isInvalid={name.touched && errors.name} placeholder="Testimonial title"/> <Form.Control.Feedback type="invalid"> {errors.name} </Form.Control.Feedback> </Form.Group> <Form.Group controlId="image"> <Form.Control className="input-field" type="file" name="image" isInvalid={image.touched && errors.image} /> <Form.Control.Feedback type="invalid"> {errors.image} </Form.Control.Feedback> </Form.Group> <button className="submit-btn" type="submit">Send</button> {message && <div>{message}</div>} </Form> </div> )} </Formik> 我像这样初始化引导表单导入： 从react-bootstrap导入{Form as myForm}； 然后你可以像这样使用它： 这样它就不会被formik的Form组件覆盖

如何扩展特定类型/接口以进行反应引导类型定义？

我尝试以某种方式扩展或所谓的覆盖react-bootstrap库中现有的类型定义，因为我修改了主题并添加了更多的间隔符/间隙，这将影响库。 我是