标签: react-bootstrap

我正在使用react-bootstrap，并且在我的react网页中实现了一个下拉菜单。handleClick在我的下拉菜单中，当选择按钮时我将调用一个函数。

<Dropdown.Menu>\n    <Dropdown.Item name = "baudratestate1200" onSelect={this.handleClick}>1200</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate2400" onSelect={this.handleClick}>2400</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate4800" onSelect={this.handleClick}>4800</Dropdown.Item>\n    <Dropdown.Item name = "baudratestate9600" onSelect={this.handleClick}>9600</Dropdown.Item>\n</Dropdown.Menu>\n

这是我的handleClick功能：

handleClick = (eventkey, event) => {\n  console.log(eventkey)\n  console.log(event)\n}\n

然而，它event.target是空的，下面附上的是console.log我的客户端浏览器的：

Class {dispatchConfig: {\xe2\x80\xa6}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: \xc6\x92, \xe2\x80\xa6}\nnativeEvent: (...)\ntype: (...)\ntarget: null\n

我尝试过绑定和不绑定构造函数中的函数，但两者都为 event.target 生成了空值

Class {dispatchConfig: {\xe2\x80\xa6}, _targetInst: FiberNode, _dispatchInstances: FiberNode, nativeEvent: MouseEvent, _dispatchListeners: \xc6\x92, \xe2\x80\xa6}\nnativeEvent: (...)\ntype: …

我想更改切换按钮的线条颜色。我尝试更改 Navbar.Toggle 的内联样式，但没有成功。有人有主意吗？

我正在尝试添加一个进度条用作评论，这真的很奇怪，因为没有显示任何内容。

我尝试从react-bootstrap 中复制/粘贴示例，但它根本不起作用。我也尝试了material-ui，但同样的事情......

我不明白为什么，我并没有使用它作为一种奇怪的方式。

<Col>
                        <Row className="review-summary">
                            <p> 5 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 4 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 3 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 2 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                        <Row className="review-summary">
                            <p> 1 </p>
                            <ProgressBar variant="info" now={60} bsPrefix="review-summary-progress"/>
                        </Row>
                    </Col>

CSS 是：

.review-summary {
    display: inline-flex;
}

.review-summary p {
    font-family: Source Sans Pro;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6; …

我正在使用react-bootstrap中的工具提示覆盖，但收到错误findDOMNode is deprecated in StrictMode。根据文档，使用overlaytrigger的函数形式可以避免React.findDOMNode调用，对于那些试图遵守严格模式的人来说，但我仍然收到如下错误。

index.js:1 Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode. Instead, add a ref directly to the element you want to reference.
in div (created by Tooltip)
in Tooltip (at NavMenu.tsx:31)
in Transition (created by Fade)
in Fade (created by Overlay)
in Overlay (created by Overlay)
in Overlay (created by OverlayTrigger)
in OverlayTrigger (at NavMenu.tsx:28)
in div (created by ForwardRef)
in ForwardRef (created by Nav) …

我正在 ReactJS 中开发一个应用程序，我有以下代码：

import React, { useState, useEffect } from "react";
import {Form } from "react-bootstrap";
import Select from "react-select";

const App = () => {

    const [validated, setValidated] = useState(false);

    const [select, setSelect] = useState({
        name: "",
        category: ""
    });

    const handleChange = e => {
        const {name, value} = e.target;
        setSelect(prevState => ({
        ...prevState,
        [name]: value
        }));
    };

    const [data, setData] = useState([]);
    ...
    /* get data */
    ...

    const categories = data.map((item) => ({ value: item.id, label: …

如果状态作为 props 传递给组件，并且该组件位于 内部Tab.Pane，则当状态更改时，它不会更新其 props。

仅当我以编程方式以 250 来回切换选项卡setTimeout（或显然手动）时，它才有效，这意味着需要再次切换选项卡以重新渲染组件（因此获得更新的状态）

奇怪的是，如果我使用存储系统作为 redux 将 prop 传递给组件而不是状态，那么这是同样的事情。

我还尝试添加mountOnEnter={true} unmountOnExit={true}到窗格中，顺便说一句，它已经设置为将Tab.Container所有内容包裹在其中，但没有任何区别。

重现该行为的步骤：

1. 创建useState某种状态存储
2. 将其作为 prop 分配给组件
3. 将组件放置在react-bootstrap中 Tab.Pane
4. 尝试改变状态
5. 该组件不会反映更新的状态/存储

使用的react-bootstrap版本："react-bootstrap": "^1.5.0"

我的 Tab.Pane 示例：

<Tab.Pane eventKey="items">
   <ItemsList items={data} />
</Tab.Pane>

在这里，我需要使用自定义按钮控制轮播幻灯片，我在这个示例的帮助下实现了这一点。

这是它的代码..

import React, { useState } from "react";
import { Carousel, Button, Container, Row } from "react-bootstrap";
import Cards from "../cards";
import "./slider.css";

const Slider = () => {
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    setIndex(selectedIndex);
  };

  const onPrevClick = () => {
    if (index > 0) {
      setIndex(index - 1);
    } else if (index === 0) setIndex(2);
  };
  const onNextClick = () => {
    if (index === 2) {
      setIndex(0);
    } …

我对这三个链接感到困惑，它们有哪些不同的使用方法？

• 导航链接
• 关联
• 导航链接我

他们有不同的用例吗？

我想使用 React 构建我自己的基于 Web 的 MS Paint 版本。我已经编写了基本的 javascript canvas 代码，现在我想制作一个漂亮的 gui，顶部有一个菜单栏，左侧有一个部分用于选择要使用的工具等。

谁能推荐一款带有按钮、菜单栏等预制组件的拖放软件，让我可以轻松制作专业外观的用户界面？另外，如果我能提供一些关于我的工作流程的建议，我将不胜感激。

我的目标是让标题和内容占页面宽度的 100%。我没有 css 文件，而是使用 mantine 作为样式。我尝试过将不同组件的宽度编辑为 100%，但没有成功。一旦我的页面使用 100% 宽度，最终目标是使用显示网格来组织列中的组件。我希望我的 WeatherComponent 填充整个宽度，所以说 gridColumnStart: 1 到 4 TodoList 开始和结束 1 到 2，NewsComponent 开始和结束 2 到 4。 这是我的仪表板，其中呈现组件：

import { Container } from '@mantine/core';

import { Group } from '@mantine/core';
import NewsComponent from '../components/NewsComponent';
import TodoList from '../components/TodoList';
import WeatherComponent from '../components/WeatherComponent';

const Dashboard = () => {
  return (
    <Container style={{ display: 'grid', gap: '20px' }}>
      <Group style={{ gridColumn: '1 / span 3' }}>
        <WeatherComponent />
      </Group>
      <Group style={{ gridColumnStart: 1, gridColumnEnd: …