react-bootstrap 相关问题

我找不到错误 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。该模式有一个带有溢出的输入，我想要实现的基本上是这样的： 上

如何使用多个引用在输入之间移动焦点？

在一个遗留项目中，我有 React Bootstrap V3。 我需要将焦点移至下一个输入文本。例如。如果用户已将数字插入第一个输入，则焦点需要位于第二个输入上。并继续...

找不到模块：无法解析“react-bootstrap/Navbar”

尽管尝试安装react-bootstrap、reactstrap、添加脚本并从react-bootstrap文档导入，但我仍然收到此错误。 我已经尝试过：npm i react-bootstrap --save...

如何捕获和清除多个React-Boostrap<Form.Select>的

一直在尝试找到一些具体的示例或相关文档。但我发现的几乎所有内容都与多选下拉菜单（这不是）或单个有关 一直在尝试找到一些具体的示例或相关文档。但我发现的几乎所有内容都与多选下拉菜单（这不是）或单个有关。 问题是，我无法弄清楚如何使用按钮清除所有 下拉菜单的状态。本质上是重置整个状态。还有一个问题我还没有解决，我如何从每个中获取数据？ 这是代码： function FilterIssues() { const [states, setStates] = useState([]); const [selectValue, setSelectValue] = useState(""); const changeToCategory = (e) => { let filterCategory = issueCategorySubCategory.SubCategory.filter( (item) => item.CategoryId === parseInt(e.target.value) ); setStates(filterCategory); }; return ( <Card style={{ width: '50%', marginLeft: 'auto', marginRight: 'auto', marginTop: '0.5%' }} border='secondary'> <Card.Body style={{ paddingTop: '2%', paddingBottom: '2%' }}><h4>Filter Issues</h4> <Form> <Row className="mb-4"> <Form.Group as={Col} controlId="formGridOwner"> Site <Form.Select name='site' value={selectValue} onChange={(e) => setSelectValue(e.target.value)} > <option value="">Choose...</option> {walkSiteProfileType.Site.map((item) => { return ( <option value={item}>{item}</option> ); })}; </Form.Select> </Form.Group> <Form.Group as={Col} controlId="formGridStatus"> Profile <Form.Select name='profile' value={selectValue} onChange={(e) => setSelectValue(e.target.value)} > <option value="">Choose...</option> {walkSiteProfileType.Profile.map((item) => { return ( <option>{item}</option> ); })}; </Form.Select> </Form.Group> <Form.Group as={Col} controlId="formGridStatus"> Type <Form.Select name='type' value={selectValue} onChange={(e) => setSelectValue(e.target.value)} > <option value="">Choose...</option> {walkSiteProfileType.Type.map((item) => { return ( <option>{item}</option> ); })}; </Form.Select> </Form.Group> </Row> <Row className="mb-4"> <Form.Group as={Col} controlId="formGridOwner"> Status <Form.Select name='status' value={selectValue} onChange={(e) => setSelectValue(e.target.value)} > <option value="">Choose...</option> {issueCategorySubCategory.Status.map((item) => { return ( <option>{item}</option> ); })}; </Form.Select> </Form.Group> <Form.Group as={Col} controlId="formGridCategory"> Category{" "} <Form.Select name='category' value={selectValue} onChange={(e) => { changeToCategory(e); setSelectValue(e.target.value)}} > {issueCategorySubCategory.Category.map((item) => { return ( <option value={item.CategoryId} key={item.CategoryId}> {item.CategoryName} </option> ); })} <option value="">Choose...</option> </Form.Select> </Form.Group> <Form.Group as={Col} controlId="formGridSubCategory"> Subcategory{" "} <Form.Select name='subcategory' value={selectValue} onChange={(e) => setSelectValue(e.target.value)} > {states.map((item) => { return ( <option value={item.SubId} key={item.SubId}> {item.name} </option> ); })} <option value="">Choose...</option> </Form.Select> </Form.Group> </Row> </Form> </Card.Body> <Card.Footer> <Button variant='success' className='m-1'>Filter Issues</Button> <Button variant='danger' className='m-1' onClick={() => setSelectValue("")}>Clear Filter</Button> <AddNewIssueModal></AddNewIssueModal> </Card.Footer> </Card> ) } 基本上现在，当我从一个下拉列表中选择一项时，它将重置所有其他下拉列表中的状态。我尝试设置一个变量来保存这些值，但我的实现无法正常工作（对 React 没有太多经验）。 按钮上的重置功能有效，但这是因为只有一个实际项目需要重置。所以我一定错过了一些重要的部分。 当我使用“清除过滤器”按钮时，最终目标是将所有 6 个下拉菜单清除为其原始状态“”。然后，当我使用“过滤问题”按钮时，我还想从所有下拉列表中获取值。 我尝试将值存储在中央构造中，但状态的实现似乎不正确，我正在寻找一个示例，但我在网上找不到。 可以通过实现以下代码来实现此功能。 const [selectValue, setSelectValue] = useState({ site: "", profile: "", type: "", status: "", category: "", subcategory: "", }); const changeToCategory = (e) => { let filterCategory = issueCategorySubCategory.SubCategory.filter( (item) => item.CategoryId === parseInt(e.target.value) ); setStates(filterCategory); }; const handleInputChange = (event) => { const { name, value } = event.target; setSelectValue((prevProps) => ({ ...prevProps, [name]: value })); if (name === 'category') { changeToCategory(event); } } 然后将其中的修改为： <Form.Select name='subcategory' value={selectValue['subcategory']} onChange={handleInputChange} > {states.map((item) => { return ( <option value={item.SubId} key={item.SubId}> {item.name} </option> ); })} <option value="">Choose...</option> </Form.Select>

这个对象解构中的“...rest”代表什么？

我正在阅读有关react中的unknown-prop警告，特别是因为我正在使用react-bootstrap包并在那里偶然发现了它们。 我读过：“要解决这个问题，复合组件......

Form.Control as="select"

我有一个包含更多组件的项目，我有一个通过单击按钮出现的表格，我做了一些选择并使表格消失并重新出现，但我没有保留选择...

React bootstrap 导航栏圆角

我最近开始自学一些有关 React-Bootstrap 的知识，并且正在尝试掌握自定义某些元素的窍门。 我在下面用标准 JavaScript、HTML 和 CSS 构建了这个导航栏，...

如何更改react-bootstrap中按钮的颜色？

我知道在react-bootstrap中改变颜色非常困难，但我想让我的按钮颜色不是原色。我怎样才能在 JS/SCSS 中做到这一点？

我可以将 React Bootstrap 与 Next.js 一起使用吗？

有谁知道是否可以将react-bootstrap与Next.js一起使用？我正在使用两者的最新版本，我现在可以提供代码，但现在我的应用程序没有抛出任何错误，它只是没有

如何覆盖 React Bootstrap 活动选项卡默认边框样式

我正在尝试覆盖 React Bootstrap Tabs 组件的默认边框样式（宽度和颜色）。我特别遇到困难的部分是活动选项卡。这张图...

在react中访问组件属性

我正在尝试创建一个类似于引导组件 ListGroup 的反应组件，如下所示： 从react-bootstrap导入ListGroup 我正在尝试创建一个类似于引导组件 ListGroup 的反应组件，如下所示： import ListGroup from react-bootstrap <ListGroup> <ListGroup.Item></ListGroup.item> <ListGroup.Item></ListGroup.item> <ListGroup.Item></ListGroup.item> </ListGroup> 我尝试过这样做： class ListGroup extends Component { Item = () => { return <div>Item</div> } render() { return <div>List</div> } 但是当我尝试在另一个文件中使用它时，它给了我一个错误（ListGroup.Item 未定义）。我做错了什么？ 我相信这最终就是您所寻找的： class ListGroup extends Component { static Item = (props) => { return <div>{props.children}</div>; }; render() { return <div>{this.props.children}</div>; } } export default ListGroup; 无论你在哪里称呼它： <ListGroup> <ListGroup.Item>Custom Txt</ListGroup.Item> </ListGroup>

如何为基于react-bootstrap的Column组件添加平滑的滑动过渡效果？

总结一下这个问题，我正在尝试解决一个有 2 列的组件（react-bootstrap Column 组件）。左边的容器是可折叠的，右边的容器总是在那里。点击一下...

引导表中的状态丢失值

我在反应引导表中使用自定义字段。 { 数据字段：“小时”， 文本：“小时数”， 排序：真实， 页脚：“小时数”， headerStyle: (列, colIndex...

导航栏中的间距

我正在尝试向我的示例项目添加一个简单的导航栏。 它运作良好 - 但单独的链接（案例、推荐）粘在一起。 我怎样才能改变造型，让它们更特别...