标签: react-bootstrap

我正在努力解决 React 中侧边栏组件的一些响应式设计问题，其中一个问题是选项卡上的标签文本在较小的屏幕上会变得很糟糕。我想隐藏这段文字，但我似乎找不到一个好的方法来做到这一点。

我尝试用在小/超小屏幕上通过 bootstrap 隐藏的 div 替换标签文本，但这不起作用

<Tab
  icon={<Icon className="material-icons geometry">category</Icon>}
  label={<div className=".hidden-xs .hidden-sm">GEOMETRY</div>}
  value='a' />

理想情况下，该文本应该在较小的屏幕上消失，但它的表现就好像我根本没有在其中放置任何内容一样。事实上，我尝试添加到该 div 的任何引导类似乎都没有效果。我该如何解决这个问题？

我对 React 相当陌生，并开始检查 React-Bootstrap 以及组件的样式方式。该文档清楚地使用以下方式对组件进行样式设置variant：

<Button variant="primary">Success</Button>

然而，这段代码似乎与传统的className. 从功能上和美学上来说，如果我将上面的代码更改为类似的内容，

<Button className="bg-primary">Success</Button>

输出是完全相同的。就我个人而言，我发现使用该className属性更容易，因为我可以编写普通的引导类，btn btn-primary...而不是不同的反应引导类。

两者之间有什么功能差异吗？有理由使用variantover吗className？

您好，我使用react-bootstrap、mdbootstrap 和formik 创建一个登录表单。我希望每次用户按下登录按钮时都会显示登录微调器。我已经弄清楚了如何做到这一点，但是我在将引导旋转器与登录按钮放在同一行时遇到了麻烦

我想要实现这样的目标\n

这是我的代码

render() {\n        return (\n            <Formik\n                validationSchema={schema}\n                onSubmit={this.handleSubmit}\n                initialValues={{username: \'\', password: \'\'}}>\n                {\n                    formProps => (\n                        <Form name=\'form\' onSubmit={formProps.handleSubmit}>\n                            <Form.Group noValidate controlId="loginForm.username">\n                                <Form.Label>Adres e-mail</Form.Label>\n                                <Form.Control\n                                    type="text"\n                                    name="username"\n                                    value={formProps.values.username}\n                                    onChange={e => {\n                                        formProps.handleChange(e);\n                                        const {username} = formProps.initialValues;\n                                        if (formProps.values.username === username) {\n                                            formProps.setFieldTouched(\'username\', false)\n                                        }\n                                    }}\n                                    isInvalid={!!formProps.touched.username && !!formProps.errors.username}\n                                />\n                                <Form.Control.Feedback type="invalid">\n                                    {formProps.errors.username}\n                                </Form.Control.Feedback>\n                            </Form.Group>\n                            <Form.Group controlId="loginForm.password">\n                                <Form.Label>Has\xc5\x82o</Form.Label>\n                                <Form.Control\n                                    type="password"\n                                    name="password"\n                                    value={formProps.values.password}\n                                    onChange={e => {\n                                        formProps.handleChange(e);\n                                        const {password} = formProps.initialValues;\n                                        if (formProps.values.password === password) …

我正在做一个项目。我上面有导航栏和导航链接。例如房屋、价格和功能。

我想在单击它时进行分页路由。这是我关于它的代码。我按照通常的路由方式做了，但它不起作用。

<LinkContainer>
     <Nav.Link to="/price" >Price</Nav.Link>
</LinkContainer>

以及我在 app.js 中的路由定义；

<Route path ="/price" exact component={Price}></Route>

我创建并导入 Price.js 并导入它们。

我可以在按钮上成功使用路由，但 nav.links 不起作用。任何想法？

*顺便说一句，它原来是这样的 <Nav.Link href="#price" >Price</Nav.Link> 实际上我不知道href是做什么的？所以，我删除了它并添加了“to”

当我调用setState并且重新呈现表单时，文本输入的值不会更改。

import React, { Component } from 'react';
import { Button, Col, Form, Row } from 'react-bootstrap';

export default class Test extends Component {

    constructor(props) {
        super(props);
        this.state = {
            status: "new"
        }
    }

    approve = (e) => {
        this.setState({
            status: "I'm newer than you!"
        });
        e.preventDefault();
    }

    render() {
        return (
            <div>
                Status is {this.state.status}
                <Form onSubmit={this.approve}>
                    <Form.Group as={Row} controlId="status">
                        <Form.Label column >Status</Form.Label>
                        <Col>
                            <Form.Control readOnly type="text" size="sm" defaultValue={this.state.status} />
                        </Col>
                    </Form.Group>
                    <Form.Group as={Row}>
                        <Button type="submit">approve</Button>
                    </Form.Group> …

数据库.json

{
  "products": [
    {
      "id": 1,
      "name": "Moto G5",
      "quantity": 2,
      "price": 13000
    },
    {
      "id": 2,
      "name": "Racold Geyser",
      "quantity": 3,
      "price": 6000
    },
    {
      "id": 3,
      "name": "Dell Inspiron",
      "quantity": 4,
      "price": 50000
    },
    {
      "id": 4,
      "name": "Epson Printer",
      "quantity": 1,
      "price": 9500
    },
    {
      "name": "Lenovo G50",
      "quantity": 2,
      "price": 50000,
      "id": 5
    }
  ]
}

应用程序.js

{
  "products": [
    {
      "id": 1,
      "name": "Moto G5",
      "quantity": 2,
      "price": 13000
    },
    {
      "id": 2,
      "name": …

嗨，我正在制作一个带有 React 的项目，我注意到，使用我制作和设计的一些按钮，当单击它时，它们有时会出现看起来很奇怪的蓝色边框。我试图通过设置border:none !important甚至尝试覆盖它的颜色来摆脱它，但我似乎无法摆脱它。我只是使用 scss 进行样式设置并且也已经react-bootstrap安装了。

这是具有蓝色边框的按钮的示例：

按钮代码

// button 1

<button type="button" className="btn employee-button" value={employee} key={employee.id} onClick={(e) => this.onEmployeeClick(employee)}>
          <div  className={this.state.startId === employee.id ? "selected employee-card" : "employee-card"}>
            <Gravatar email={employee.email} className="employee-gravatar" />
            <div>
               <p className="employee-name">{employee.firstname} {employee.lastname}</p>
               <p className="employee-job">{employee.jobTitle}</p>
              </div>
           </div>
</button>

// button 2

  <button className="btn" onClick={this.openPopUp}>Create new client</button>

造型

// button 1
        .employee-button {

            .employee-card {
                display: flex;
                flex-direction: row;
                background-color: $white;
                width: 250px;
                height: 70px;
                padding: 10px;
                border-radius: 10px;
                margin-left: 15px;
                

                .employee-gravatar { …

我在 React 中使用 CDN 的 Bootstrap 5。我有一个组件将在反应组件之一中使用 Popover。因此，根据文档，它说“您必须在 bootstrap.js 之前包含 popper.min.js 或使用包含 Popper 的 bootstrap.bundle.min.js / bootstrap.bundle.js 才能使弹出窗口正常工作！”

并且要初始化页面上的所有弹出窗口，请使用给定的 javascript 代码：

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-
toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

但我无法在我的反应组件中的 useEffect 中使用它，因为它返回“bootstrap.Popover(popoverTriggerEl)”对象，该对象在我的反应组件中未定义。

请问有人可以指导我吗？

我正在使用 Form.Control 创建一个下拉列表，我想让该列表动态化。我的代码如下所示：

render() {
 return (

 <Form.Control as="select" value={this.state.inputval} onChange={this.updateinputval}>
  <option value={myArray[0].value}> myArray[0].value </option>
  <option value={myArray[1].value}> myArray[1].value </option>
 </Form.Control>

 )
}

显然这仅在有两个元素时才有效myArray。我想找到一种动态传递myArray到options“Form.Control”的方法。我在这里找到了有关如何使用它的答案，但它似乎不像我在这里那样Select工作。Form.Control as ="select"

谢谢

我正在尝试在 Bootstrap 5 中使用 react-bootstrap。我想在我的一个页面中使用 Accordion。为此，我只是从这个页面复制了结构-> https://react-bootstrap.netlify.app/components/accordion/。但是当我打开页面时，浏览器显示此错误-

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Questions`.

这是我使用这个组件的代码

import Accordion from 'react-bootstrap/Accordion';

const Questions = () => (
    <Accordion defaultActiveKey="0" flush>
        <Accordion.Item eventKey="0">
            <Accordion.Header>Question #1</Accordion.Header>
            <Accordion.Body>
                Answer to the Question …