问题标签 [react-class-based-component]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
0 回答
178 浏览

javascript - 如何在 ReactJS 中的多个基于类的组件上使用 Formik

我对 ReactJS 很陌生,如果我有 FormSectionOne.js(包含输入字段的容器)和 InputFieldsOnSectionOne.js(包含输入字段定义),我需要一些有关如何使用 Formik 的帮助

示例代码:

CreateEmployeeInformation.js

WorkDetails.js

我希望这种结构有一个可能的解决方案,因为我将每个部分的所有输入字段一分为二。

0 投票
2 回答
670 浏览

reactjs - 如何使用 React JS 中的按钮 onClick 更改按钮内的背景和文本颜色

我是 React JS 的新手。我正在使用 React-bootstrap 创建一个简单的网页。单击按钮时,我需要更改标题颜色和文本颜色以及背景颜色。例如,当我单击绿色按钮时,它将在绿色背景中将标题颜色更改为深绿色,将文本部分更改为浅绿色。我应该添加什么代码来管理这个?

这是我的代码

0 投票
2 回答
2731 浏览

reactjs - 如何在类组件中使用 Context API

我正在做一个非常大的翻译项目。我使用Formspree来处理表格。我也想翻译那个。

这是Formspree给出的代码:

这对我来说一团糟,因为我不使用类组件我使用功能组件。

我试图在该文件中添加我的上下文,并且每次都显示完全相同的错误。

这是错误:

错误

我试图把这段代码放在那里:

我尝试多次输入这行代码,但错误是一样的。

0 投票
1 回答
84 浏览

reactjs - 构造函数中未定义的上下文 - 反应

我需要将上下文传递给 super 以便能够在构造函数中访问它。

他们的最新文档中没有将上下文传递给构造函数-

https://reactjs.org/docs/context.html

但它存在于旧版 api 文档中。

https://reactjs.org/docs/legacy-context.html#referencing-context-in-lifecycle-methods

由于将上下文传递给 super 将在 17 及更高版本中被弃用,有什么方法可以在将上下文传递给构造函数中的 super 时访问上下文?

谢谢!

0 投票
1 回答
43 浏览

reactjs - 如何防止用户输入以数字开头的用户名,但只允许在字母字符后输入数字?

我有下面的代码,我的麻烦是当我想检查用户是否在前面使用startsWith()函数输入了一个数字时,我得到一个“TypeError:usernameField.startsWith is not a function”。如何防止用户输入以数字开头的用户名,但只允许在字母字符后使用数字,这样当他们将数字放在前面时,它会一目了然,然后什么都没有?

0 投票
1 回答
36 浏览

reactjs - 按执行顺序反应类组件问题

我的 React 类组件中有以下代码。

出于某种原因,我观察到,在内部componentDidMount,尽管await在调用之前有关键字 to this.getKeyForNextRequest(),但执行会跳转到下一个调用this.loadGrids().

我在这里做错了吗?

0 投票
1 回答
730 浏览

reactjs - 使用复杂/嵌套状态更新重新渲染 React 子组件

下面是我的实际代码的示例版本。

经过一些互动后,我正在更新我父母状态的假人,如下所示

真正的问题来了。当假人的名称属性发生微小变化时,如何让我的 Child 和 GrandChild 组件呈现?我认为 React 的浅层比较无法识别更改,但我需要 Child 和 GrandChild 重新渲染和更新 UI。我怎样才能做到这一点?(请注意,我无法避免状态中的对象数组)

0 投票
1 回答
34 浏览

javascript - 将 React 类组件转换为功能组件,完美渲染但功能丢失?

我正在制作一个小型音频播放器应用程序并尝试将我的反应类组件转换为功能组件。

类组件的原始代码在这里:

我尝试了以下转换:

除了删除一些与样式相关的道具之外,逻辑基本相同。唯一的区别是当前轨道的处理,我试图通过使用状态来表示这一点。

当将对象渲染到不同的页面时,它在屏幕上看起来完全正常,唯一的问题是轨道本身不再触发音频播放器中的响应。

如果有人能找出我在转换过程中遗漏的任何东西,真的会很感激吗?

0 投票
0 回答
40 浏览

javascript - Converting Function Base Component into Class Base Component

Right now, I have a react functional base component. I need to convert it to a class based component. I am fairly new to React but I have tried to convert the component. But still, no luck. The code is of the basic dashboard which I have picked from https://github.com/mui-org/material-ui/blob/master/docs/src/pages/getting-started/templates/dashboard/Dashboard.js

This is my functional component

This is what I have done so far in Class Component

Your help will be highly appreciated. Thanks

0 投票
1 回答
34 浏览

reactjs - 无法将类转换为功能组件,“未安装错误”

快速前言:如果您急于发布新帖子,请继续前进,而不是将其标记为重复,因为我真的需要帮助。抱歉,如果我听起来很苛刻,但我已经经历过太多次了。

我在将以下组件代码转换为基于函数的代码时遇到了麻烦。有人可以帮忙吗?

这是我尝试过的:

本质上,我在不同的 convert-class-to-funtion 教程之间跳来跳去,遇到了这个线程中描述的问题。然后我尝试实现我自己的版本——但它没有用。

仅供参考,“这里”打印在控制台中,控制台没有抛出任何错误——按钮只是没有动画。

提前谢谢了。