react-bootstrap 相关问题

使用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库中现有的类型定义，因为我修改了主题并添加了更多的间隔符/间隙，这将影响库。 我是

当我单击链接时，我试图关闭 React Bootstrap 中的 offcanvas 菜单

我正在使用React Bootstrap和React的组合来制作单页面应用程序，我尝试了几种方法来在单击链接时关闭Offcanvas菜单。我尝试制作内联脚本...

类型“Element”不可分配给类型“ReactNode”。 “Element”类型中缺少属性“children”，但“ReactPortal”类型中需要属性“children”。ts(2322)

我想使用react-bootstrap创建导航栏 我将如下代码放在 sr 中

我找不到错误 TypeError：无法读取未定义的属性（读取“名称”）

我是 React 新手，当我尝试从 React 应用程序的一个名为“products.js”的文件中的一组对象中获取一些“产品”时，我需要一些帮助。 我的事情...

除了打字稿中的任何类型之外，我可以将什么类型用于 ReactBootstrap 表单的提交事件。我可以用什么来代替参数类型中的 **any**

我正在提交带有验证的 React-Bootstrap 表单。我的代码在使用时工作正常 const SubmitHandler = (e: 任意) => { e.preventDefault(); const 形式 = e.currentTarget!; ...

如何动态设置组件的值并测试它们

我使用react-bootstrap创建了一个寄存器组件。它在表单中包含电子邮件、密码和提交按钮字段。最后，它有一个警报组件，最初不应该可见，但是

将react-bootstrap Button与react-router和typescript一起使用时出现类型问题

我创建了一个简单的反应引导卡组件，如下所示： 我创建了一个简单的反应引导卡组件，如下所示： <Card className={` ${styles.stretchCard}`}> <Card.Body className='d-flex flex-column'> <Card.Title>{post.title}</Card.Title> <Card.Text className='m-0'><span className={styles.dataTitle}>Author: </span>{post.author}</Card.Text> <Card.Text ><span className={styles.dataTitle}>Published: </span>{post.publishedDate}</Card.Text> <Card.Text>{post.shortDescription}</Card.Text> <Button as={Link} to={`post/${post.id}`} className='align-self-start mt-auto' > Read more </Button> </Card.Body> </Card> 该组件使用了 boostrap Button，其中传递了 as 属性，它是一个 react-router Link 组件。一切正常，但编译代码后出现以下错误： 类型“ForwardRefExoticComponent”不可分配给类型“(ForwardRefExoticComponent & keyof IntrinsicElements) |不明确的'。 类型“ForwardRefExoticComponent”不可分配给类型“ForwardRefExoticComponent &“symbol””。 类型“ForwardRefExoticComponent”不可分配给类型““symbol””。 18 | 18 发布：{post.publishedDate} 19 | 19 {post.shortDescription} 20 | post/${post.id}} className='align-self-start mt-auto'>阅读更多 | ^^ 21 | 21 22 | 22 23 | 23 我想知道我是否可以将 Link 项目投射为特定类型 - 如果可以的话它应该是什么样子，因为这是我无法弄清楚的。我真的很想对整个项目进行类型检查，所以我不想强制转换为“任何”。 这可能会晚一些，但是在将 link 组件传递给 Button 组件时将其转换为 React.ComponentClass 似乎可以解决您所描述的问题。 将其放在这里以供将来参考。 import { Link, LinkProps } from "react-router-dom"; import { Button } from "react-bootstrap"; type CustomBootstrapLinkType = React.ComponentClass<LinkProps> & keyof JSX.IntrinsicElements <Button variant="link" as={ Link as unknown as CustomBootstrapLinkType } to={`post/${post.id}`} > view more &gt; </Button>

如何更改引导表单中日期选择器/日历图标的位置？

我使用react-bootstrap ，日历图标或日期选择器会自动设置到表单字段的右侧/末尾。我想移动日历

如何从react-icons包中缩放（大）字体很棒的图标

我正在使用 marvelouse react-icons 包（http://gorangajic.github.io/react-icons/fa.html），特别是 font Awesome 包。 如果这不是反应，那么我只会添加一个属性...

引导模式上的粘性图标或页脚

我的粘页脚遇到了问题。我有这个模态，我想在里面有一个粘性 div。该模式有一个带有溢出的输入，我想要实现的基本上是这样的： 上