无法在 Material UI 日期选择器上显示错误和错误消息
我正在使用 React Material UI 我想在后端计算的某些条件下显示错误。 我使用了 Material UI-datepicker 但无法显示错误 从 'react' 导入 * as React； 导入
Angular Material v17：缺少“MatFormFieldAppearance”中的“遗产”
在 Angular Material v14 中，MatFormFieldAppearance 提供了传统、标准、填充和轮廓值。 类型 MatFormFieldAppearance = '旧版' | '标准' | '填充' | '大纲'; 然而，在 Angular
无法解决依赖关系：来自@material-ui/[email protected]的peer React@"^16.8.0 || ^17.0.0"
我使用创建了一个反应项目 npm 初始化 -y npm 安装 React React-dom 然后我尝试安装 Material UI npm 安装@material-ui/core 它得到错误 npm 错误！代码 ERESOLVE npm 错误！解决...
我创建了一个“自定义”主题（使用 https://material.angular.io/guide/theming 上的主题文档，这非常糟糕），如下所示： @import '~@angular/material/theming'; @包括 mat-cor...
React Material 选项卡方向在响应式中发生变化？
如何更改响应式材质选项卡方向变化？我正在使用 React Material 版本 4 我需要桌面响应式的orientation=“horizontal”，它应该是orientation=“
@types/material-ui 和官方的@mui/types 包有什么区别？
npm 包：@types/material-ui 和 @mui/types 我知道前者受到 Definely Typed 社区的支持，但如果存在官方类型包，为什么它首先存在呢？我已经
从 'react-chat-engine' 导入 { ChatEngine, ChatFeed }; 从 './components/chatFeed' 导入 ChatFeed； 导入'./App.css'; 常量应用程序 = () => { 返回（ import { ChatEngine, ChatFeed } from 'react-chat-engine'; import ChatFeed from './components/chatFeed'; import './App.css'; const App = () => { return( <ChatEngine height="100vh" projectID="" userName="" userSecret="" renderChatFeed={(chatAppProps) => <ChatFeed {...chatAppProps} />} /> ); } export default App; 服务器运行时显示错误 SyntaxError: D:\PROJECTS\APPLICATION\chat_app\src\App.js: Identifier 'ChatFeed' has already been declared. (3:7) 1 | import { ChatEngine, ChatFeed } from 'react-chat-engine'; 2 | > 3 | import ChatFeed from './components/chatFeed'; | ^ 好吧，错误消息说明了一切，您声明了 ChatFeed 两次。 您可以通过以下方式修复它： 重命名您的组件，例如 import ChatFeedComponent from './components/chatFeed'; 将命名导入从 react-chat-engine 重命名为 import { ChatEngine, ChatFeed as ChatFeedComp } from 'react-chat-engine'; 当然，随意使用你喜欢的任何名称 错误消息显示您导入 ChatFeed 两次。 您可以修复它，从第一行删除 chatFeed 用这个 从“react-chat-engine”导入{ChatEngine}； 从 './components/ChatFeed' 导入 ChatFeed；
我正在尝试使用 React Material UI 模态，但当它聚焦时，我总是在模态周围看到黑色边框。当它失焦时我已经删除了边框，但是如果模态聚焦......
RollupError：无法解决 - Vercel React vite 部署
我尝试在 vercel 或 netlify 上部署我的 React vite 项目，但出现错误： RollupError：无法从“src/components/Pages/CarDetails/CarDetails...”解析“./reviews/Reviews”...
ASP.NET 中的“razor”和“cshtml”文件有什么区别？我们应该在“razor-components”应用程序中使用“.razor”文件而不是“.cshtml&...
如何在 Angular Material 2 中构建自定义组件
是否有任何标准方法可以在 Angular Material 2 之上构建自己的组件或扩展现有组件。 之前我使用过 Sencha/ExtJS 框架，构建自己的框架非常简单
我正在使用 Angular 和 Material 创建一个 Web 应用程序，我希望能够拖放和调整我的部分的大小。有没有办法使用 Angular Material 拖放 CDK 来完成？
将 Angular Material 从 16 迁移到 17 时出现目录错误
我正在尝试运行 Angular Material 迁移工具以从 16 迁移到 17，但收到一条错误消息，指出目录必须是字符串。 JSON 显示它是错误的。这不是提示，a...
使用 AMQP 注释的 ActiveMQ Artemis 重新交付延迟
在artemis中，当使用AMQP时，有一个注释表明您希望稍后发送消息，称为x-opt-delivery-time https://activemq.apache.org/components/artemis/
我正在使用 React js 来开发我的 Web 应用程序，并且我正在使用 React 材料设计来进行 UI 设计。下面是我引用的网址。 https://material-ui-next.com/ 我正在努力实现一些目标...
在 React 16 中使用 RTL 测试 Material UI Drawer 的关闭逃逸功能
我正在尝试测试 Material UI Drawer。当您按 Esc 键或单击抽屉外部时，它应该关闭。但它正在失败。 我正在使用反应测试库进行测试。我创建了一个
Angular Material 6 网格列表对齐项目并将内容对齐到 flex-start
我正在尝试使用 Angular Material 6 动态网格列表。与文档相关的示例将网格的内容放在每个图块的中心。请参阅此处的示例 我想要内容进去...
react-testing-library：无法关闭 MUI Select 的下拉菜单
我有一个 SelectExample.js 从“react”导入 React, { useState }; 从“@mui/material”导入{InputLabel、MenuItem、FormControl、Select、Typography }；> 导出默认fu...
使用 date-fns 和 Angular Material 日期选择器配置区域设置时，日期会消失
我正在尝试在我的 Anuglar 18 应用程序中使用 Angular Material 日期选择器配置 date-fns。但是，当我尝试配置区域设置时，日期选择器中的所有日期都不会出现。如果我记得...
有没有一种方法可以在React中单击时嵌入链接来重定向组件？
我有一个导航栏，其路线设置如下： 导入'../styles/Nav.css' 从 'react-router-dom' 导入 { BrowserRouter as Router, Routes, Route, Link} 从 '../components/Home' 导入 { Home }
对于使用 jest 的 Angular v12 项目，我刚刚将 jest 更新到版本 28。但是现在，我收到以下错误 失败 src/app/components/update-input/update-input.directive.spec.ts ● 测试套件
MatFormFieldModule / MatLegacyFormFieldModule 未导入 MatInputFieldModule 时发生冲突
我必须在客户端项目中使用 Material Legacy 模块。 现在，我使用 MatLegacyFormFieldModule 和 MatLegacyInputFieldModule 删除了所有出现的 MatFormFieldModule 和 MatInputFieldModule。
MazPhoneNumberInput Vue.js 上的自动对焦
我在表单中使用 MazPhoneNumberInput 组件（https://maz-ui.com/components/maz-phone-number-input）： 我正在以这种方式使用 MazPhoneNumberInput 组件（https://maz-ui.com/components/maz-phone-number-input）： <MazPhoneNumberInput v-model="phoneNumber" v-model:country-code="countryCode" show-code-on-list :preferred-countries="['DE', 'US', 'GB']" noFlags /> 并且想在手机输入上设置自动对焦。 MazPhoneNumberInput 组件本身没有 autofocus 属性，但它基于具有 autofocus 属性的 MazInput 组件（https://maz-ui.com/components/maz-input）： 我尝试通过 javascript 使用 onMounted 方法设置焦点： import AppLayout from "@/Layouts/Auth/AppLayout.vue"; import MazPhoneNumberInput from 'maz-ui/components/MazPhoneNumberInput' import {ref, onMounted} from 'vue' const phoneNumber = ref() const countryCode = ref('DE') const focusInput = () => { phoneNumber.value.focus(); }; onMounted(focusInput); 但是没有成功。 如何在手机输入上设置自动对焦？ 这可以使用 template ref 来完成，它可以访问组件的 DOM 元素。由于根元素只是多个其他元素的包装，因此需要额外的查询来获取实际的电话输入，然后您可以将其聚焦： onMounted(async () => { const phoneEl = phone.value.$el // MazPhoneNumberInput root DOM element const phoneInput = phoneEl.querySelector('input[type=tel]') // inner input DOM element await nextTick() // can focus after next DOM update phoneInput.focus() })
正如您在图像中看到的那样，有一条线分隔每个表格列标题。我希望从这张表中删除这些分隔线。我正在使用 Antd 表组件。 https://ant.design/components/
为什么 Jetpack Compose Material 3 Card 可组合项的内容需要 ColumnScope？
我正在使用 Jetpack Compose，最近注意到 androidx.compose.material3 包中的 Card 可组合项要求其内容在 ColumnScope 中提供。具体来说，
Material-UI DataGrid 隐藏特定单元格的标题分隔符
有没有办法隐藏特定（或所有）单元格的标题列分隔符？ 这是我的列定义 const orderCols = [ { 字段：'DOCDATE'， headerName：'Fecha'，flex：1 ...
当React Router中的路由命中时，如何有条件地渲染两个组件或更改两个出口？
我有一个 React 应用程序，我在其中使用 React Router。在我的布局组件中，我有这样的结构： 从“反应”导入反应； 从 './components/Header/Header' 导入标头； 导入 Foo...
我尝试使用覆盖“！”但这仍然不起作用，有没有办法设计它？我在网上到处查看都无济于事。 从“反应”导入反应； 从 'styled-
我有几个 Angular 应用程序在 nx 工作区中运行。所有这些应用程序都使用 Angular Material 对话框。为此，我通常创建这样的 Angular 服务： 导入 { 管理组件 }
类型“IntrinsicAttributes & RefAttributes<any>”上不存在属性“XXX”
我将编码作为一种爱好，并且正在使用 TypeScript 构建一个 React 网站。我找到了一个免费的 Material UI 模板，我正在尝试将其集成到现有代码中。模板是用
Angular Material 17 独立组件中没有 DateAdapter 的提供者
我有一个带有 Angular 17 应用程序的 nx 项目，并尝试使用带有材料 17.0.4 的 Angular 材料日期选择器。但我明白了 NullInjectorError：没有 DateAdapter 的提供者！ 错误。组件...
tailwind 应用在 tailwind 版本 3 中不起作用
我已成功安装顺风。当涉及到使用@apply时，事情就不起作用了。 我已经成功安装顺风了。当谈到使用@apply时，事情不起作用。 <body> <!-- header --> <header class="bg-transparent absolute top-0 left-0 w-full flex items-center z-10"> <div class="container"> <div class="flex items-center justify-between relative"> <div class="px-4"> <a href="#home" class="font-bold text-lg text-primary block py-6">shrlrmdh</a> </div> <div class="flex items-center px-4"> <button id="hamburger" name="hamburger" type="button" class="block absolute right-4"> <span class="hamburger-line"></span> <span class="hamburger-line"></span> <span class="hamburger-line"></span> </button> </div> </div> </div> </header> </body> 我想仅使用 @apply 指令创建一条线并旋转跨度 这是我的 tailwind css 文件，我在其中放置了 @apply 指令 @tailwind base; @tailwind components; @tailwind utilities; .hamburger-line { @apply w-[30px] h-[2px] my-2 block bg-black; } .hamburger-active > span:nth-child(1) { @apply origin-top-left rotate-45; } .hamburger-active > span:nth-child(3) { @apply origin-bottom-left -rotate-45; } ''' I've tried many methods but @apply still doesn't work. 您需要使用 tailwind @layer 指令才能使 @apply 类正常工作。 @tailwind base; @tailwind components; @tailwind utilities; @layer components { .hamburger-line { @apply w-[30px] h-[2px] my-2 block bg-black; } .hamburger-active > span:nth-child(1) { @apply origin-top-left rotate-45; } .hamburger-active > span:nth-child(3) { @apply origin-bottom-left -rotate-45; } }
我有一个模块联合远程存储库，它是： 使用 React 17 构建 Material-ui 4 包括 jss 有来自第三方库的自己的全局 CSS，我无法编辑 我有多个主机...
Angular Material 浮动标签在悬停时消失或被切断
如果不需要的话，我不想禁用浮动标签，但它们对我来说表现不佳。当我将鼠标悬停在它们上方时，很多时候浮动标签会完全消失......
我正在努力构建一个新的 Material UI 表单。我想知道是否有只读字段的首选组件。我正在比较输入和文本字段组件，但无法真正分辨出什么......
为什么BottomSheet的背景颜色与Flutter中Material 3中设置的颜色不一样？
我正在使用材质 3 并打开 BottomSheet，如下所示： 显示ModalBottomSheet( 上下文：上下文， 背景颜色：颜色.白色， ... 然而，背景并不是 100% 白色 - 它看起来像......
我创建了一个给定高度的桌子（比如说70vh）。我想要一个垂直的列分隔线来覆盖桌子的整个高度。我可以使用 TableCell 的 CSS 添加它。但我想要垂直列分割...
如何在 Material Design 3 中使用自定义颜色？
昨天我将我的应用程序从 MD2 升级到 MD3，一切正常。但我还是不太明白MD3中的自定义颜色。 问题 我什么时候应该使用自定义颜色？真正的我们是什么...
我使用 Material-UI 选择器库来获取日期 我只想知道日期 像这样 17/07/2021 但我得到了这样的日期和时间 2021 年 7 月 17 日星期六 12:21:00 const [获取日期，
如何在 Material ui 滑块中的标签悬停时获取工具提示
我正在尝试创建一个滑块测验，我想要的是在滑块上的标签悬停时出现工具提示 现在，当我将鼠标悬停在拇指上及其鼠标位置上时，我可以看到...
Angular 15 中的外观=“标准”属性不再起作用。除标准外，所有外观均运行良好。 为什么这不再起作用了？ 结果： 需要： Angular 15 中的 appearance="standard" 属性不再起作用。除了standard之外，所有外观都运行良好。 为什么这不再起作用？ 结果： 需要： <mat-form-field class="form-field" Appearance="Standard"> <input matInput formControlName="email" matInput placeholder="email" name="email" type="text" required> </mat-form-field> 您正在使用的属性的 API 从 v14 更改为 v15 。具体来说，删除了 legacy 和 standard 外观。 导入路径 变更摘要 ... ... @angular/material/form-field 样式更改、删除一些外观、API 更改 ... ... API 更改的原因在博客中进行了解释： 我们很高兴地宣布基于 Web 材料设计组件 (MDC) 的 Angular 材料组件重构现已完成！这一更改使 Angular 能够更接近 Material Design 规范，重用 Material Design 团队开发的原语代码，并使我们能够在最终确定样式标记后采用 Material 3。 从 v14 文档来看，Angular 14 中的有效值是： type MatFormFieldAppearance = 'legacy' | 'standard' | 'fill' | 'outline'; 从 v15 文档来看，Angular 15 中的有效值是： type MatFormFieldAppearance = 'fill' | 'outline'; 如果您想继续使用appearance="standard"，您可以尝试导入MatLegacyFormFieldModule而不是MatFormFieldModule。该博客提到，只要您不同时导入两者，它们目前是可以互换的。这是为了让您能够按照自己的节奏升级各个模块（包括您自己的模块和 Angular Material）。 每个新组件的旧实现现已弃用，但仍可通过“旧版”导入使用。例如，您可以通过导入旧按钮模块来导入旧的 mat-button 实现。 import {MatLegacyButtonModule} from '@angular/material/legacy-button'; 访问迁移指南了解更多信息。 在 Angular 15 中，不鼓励使用样式来定制材质库。但是，对于这么小的要求，您可以使用： .mat-mdc-form-field-focus-overlay { background-color: white!important; } .mdc-text-field--filled:not(.mdc-text-field--disabled) { background-color: white!important; }
我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个垫选择下拉菜单，是这样写的...... 我正在使用 Angular Material 14.0.4 和 Angular 15.1.3。 我有一个mat-select下拉菜单，是这样写的... <mat-select value="5" panelClass="custom-panel"> <mat-option value="5">5</mat-option> <mat-option value="10">10</mat-option> <mat-option value="20">20</mat-option> </mat-select> 在此我应用了panelClass及其CSS代码如下... .custom-panel { top: calc(100% + 10px) !important; } 而且仍然如下。下拉列表与其文本框重叠 这是未选中时的下拉菜单 这是选择后的下拉菜单 如何将面板放置在选择文本框的正下方... 您可以使用下面的CSS来做到这一点！ 我们使用csstransform将面板移动到底部！ .custom-panel { transform: translateY(25px) !important; } 堆栈闪电战
选中/取消选中 mat-checkbox 未正确返回 true 或 false
我正在使用 Angular 15 和 Angular Material 14，下面是我用来显示复选框列表的 HTML 代码 我正在 Angular 15 和 Angular Material 14 工作，下面是我用来显示复选框列表的 HTML 代码 <div *ngFor="let control of checkboxArray.controls;let i = index" > <mat-checkbox [formControl]="control" (input)="validateInputs(notificationForm)" [checked]="control.value" (change)="control.checked=$event.checked;onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> 下面是Angular中onCheckedChange函数的代码 onCheckedChange(index: number) { this.sortCheckboxArray(); const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value) { this.lists.push(checkboxItem.id.toString()); } else { this.lists.pop(checkboxItem.id.toString()); } } this.updateSubscriberGroupsCount(); this.cdr.detectChanges(); } 当我选中复选框时，在这个 onCheckedChange 函数中，control.value 始终返回 false。哪里出了问题？无法理解.. 这是一个工作版本，复选框逻辑工作正常，希望有帮助！ 我们需要使用control.value获取表单组，但我们还需要访问内部表单控件，然后获取复选框值！ import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { FormArray, FormControl, FormGroup, ReactiveFormsModule, } from '@angular/forms'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; import { MatCheckboxModule } from '@angular/material/checkbox'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule, ReactiveFormsModule, MatCheckboxModule], template: ` <form [formGroup]="form"> <div formArrayName="array"> <div *ngFor="let control of checkboxArray.controls;let i = index" [formGroupName]="i"> <mat-checkbox formControlName="test" style="margin-bottom: 15px;" (change)="onCheckedChange(i);"> {{ checkboxItems[i].name }} </mat-checkbox> </div> </div> </form> `, }) export class App { name = 'Angular'; form = new FormGroup({ array: new FormArray([]), }); lists = []; checkboxItems: any = []; ngOnInit() { this.add(); this.add(); this.add(); } add() { this.checkboxArray.push( new FormGroup({ test: new FormControl(false), }) ); this.checkboxItems.push({ name: 'test' }); } get checkboxArray() { return this.form.get('array') as FormArray; } onCheckedChange(index: number) { // this.sortCheckboxArray(); // const checkboxItem = this.checkboxItems[index]; const control = this.checkboxArray.at(index); if (control) { if (control.value.test) { console.log('checked'); // this.lists.push(checkboxItem.id.toString()); } else { console.log('not checked'); // this.lists.pop(checkboxItem.id.toString()); } } // this.updateSubscriberGroupsCount(); // this.cdr.detectChanges(); } } bootstrapApplication(App); 堆栈闪电战
有简单的html： 公共/index.html： 有简单的html： public/index.html: <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body class="text-red-600"> some text </body> css 是从 tailwindcss -i src/styles.css -o public/styles.css 获取的 src/styles.css: @tailwind base; @tailwind components; @tailwind utilities; tailwind.config.js: module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: {}, }, plugins: [], } <body>标签中的红色不适用。默认的顺风类别是否导入到public/styles.css？ Tailwind 配置中的 public/index.html 文件似乎没有覆盖 content 文件。您必须确保使用 Tailwind 类的源代码文件被 content 文件 glob 覆盖，否则 Tailwind 将不会扫描这些文件，也不会为存在的类名生成 CSS 规则。考虑阅读有关配置的文档content。 module.exports = { content: [ "./src/**/*.{html,js}", "./public/index.html", ], theme: { extend: {}, }, plugins: [], }
在我的 Next.js Web 应用程序中，我有一个页面，如下所示： 我想让该部分（用 标签包裹）以蓝色粘性突出显示，这样当我滚动时，它会保持在原来的位置，并且只有 m... 在我的 Next.js Web 应用程序中，我有一个页面，如下所示： 我想使该部分（包含在 <aside> 标签中）以蓝色粘性突出显示，这样当我滚动时，它会保持在原来的位置，并且只有主要部分（包含图表的部分）会滚动。 这是 layout.tsx 文件： import { dashboardConfig } from "@/config/dashboard"; import { MainNav } from "@/components/nav/main-nav"; import { DashboardNav } from "@/components/nav/dashboard-nav"; interface DashboardLayoutProps { children?: React.ReactNode; } export default async function DashboardLayout({ children, }: DashboardLayoutProps) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } 请注意，我已将类 sticky 和 top-0 应用于我想要粘贴位置的部分。但它不起作用。 我做错了什么？ 考虑通过 align-self: start 将 self-start 应用到粘性元素。默认情况下，它将具有 align-self: stretch，这将使其成为其父网格元素的完整高度，因此不会观察到粘性效果。通过应用 align-self: start，它的高度将仅与其内容一样高，如果存在垂直自由空间，则可以观察到粘性效果。 const dashboardConfig = { sidebarNav: '' }; const MainNav = () => 'MainNav'; const DashboardNav = () => 'DashboardNav'; function DashboardLayout({ children, }) { return ( <div className="flex min-h-dvh flex-col relative"> <header className="container z-40 bg-background"> <MainNav /> </header> <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr] mt-32 mb-12 relative"> <aside className="hidden w-[200px] flex-col md:flex sticky top-0 self-start"> <DashboardNav items={dashboardConfig.sidebarNav} /> </aside> <main className="flex w-full flex-1 flex-col overflow-hidden"> {children} </main> </div> </div> ); } function App() { return ( <DashboardLayout> <div class="h-[200vh]"></div> </DashboardLayout> ); } ReactDOM.createRoot(document.getElementById('app')).render(<App/>); <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.2.0/umd/react.production.min.js" integrity="sha512-8Q6Y9XnTbOE+JNvjBQwJ2H8S+UV4uA6hiRykhdtIyDYZ2TprdNmWOUaKdGzOhyr4dCyk287OejbPvwl7lrfqrQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.2.0/umd/react-dom.production.min.js" integrity="sha512-MOCpqoRoisCTwJ8vQQiciZv0qcpROCidek3GTFS6KTk2+y7munJIlKCVkFCYY+p3ErYFXCjmFjnfTTRSC1OHWQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="https://cdn.tailwindcss.com/3.4.1"></script> <div id="app"></div>
Pinia 对象在 Vue 中的 foreach 后失去反应性
我有这个嵌套的foreach BalanceItemList.vue ... 我有这个嵌套的 foreach BalanceItemList.vue <template> <div v-for="category in categoryItemsStore.balanceCategories" :key="category.id" class="mt-5"> <div class="border-black border-b bg-gray-200"> <span class="font-bold w-full">{{ category.name }}</span> </div> <div v-for="balanceItem in category.balance_items" :key="balanceItem.id"> {{ balanceItem.total = 500 }} <balance-item :balance-item="balanceItem" @update-balance-item="update"/> </div> <div> <balance-item-create :category="category.id" @create-balance-item="update"/> </div> <div v-if="categoryItemsStore.totals[category.id]" class="grid grid-cols-4-b t-2 ml-2"> <div :class="category.is_positive ? '': 'text-red-600' " class="col-start-4 border-t-2 border-black font-bold"> €{{ categoryItemsStore.totals[category.id].total }} </div> </div> </div> </template> 我像这样检查了“balanceItem”的反应性 {{ balanceItem.total = 500 }} 它在商店中更新，但随后我有了我的平衡项目组件： BalanceItem.vue <script setup> import {reactive} from "vue"; import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = reactive(props.balanceItem); const form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { props.balanceItem.total = 500 categoryItemStore.updateBalanceItemsTotals(form) emit('update-balance-item') } }) } </script> <template> <form @submit.prevent="submit"> <div class="grid grid-cols-4-b"> <span>{{ item.name }}</span> <NumberInput v-model="form.count" autofocus class=" mr-4 mt-1 block" type="number" @update:model-value="submit" /> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1">€</div> <NumberInput v-model="form.amount" :class="form.errors.amount ? 'border-red-600' : ''" autofocus class="mt-1 mr-4 w-5/6" type="text" @update:model-value="submit" /> </div> <div :class="item.item_category.is_positive ? '' : 'text-red-600'" class="flex place-items-center"> <div class="pt-1 mr-1 w-5/6">€</div> <NumberInput v-model="form.total" autofocus class="mt-1 block" disabled style="max-width: 95%" type="text" /> </div> </div> </form> </template> 这是我测试反应性的商店。如果我增加输入的数字，则项目的计数保持不变 UseCategoryItemsStore.js import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } function updateBalanceItemsTotals(selectedItem) { balanceCategories.value.forEach((category) => { category.balance_items.forEach((item) => { if (item.id === selectedItem.id) { // item.total = item.count * item.amount console.log(item) } }) }) } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, updateBalanceItemsTotals} }) 在此测试中，我执行“props.balanceItem.total = 500”。但如果我检查商店，它不会更新。看来将“balanceItem”分配给一个道具会失去与我的 Pinia 商店的反应性。我可以使用“form.total = form.count * form.amount”手动更新我的表单，但这对我来说似乎很老套，我想使用 Pinia 商店的反应性。我考虑过根据“BalanceItem”获取 Pina 项目，但这似乎也很棘手。谁知道为什么失去反应性？ 我有laravel 10.39、vue3.2.41和pinia 2.1.17惯性0.6.11。到目前为止我知道的所有最新版本。 我像这样更新我的表格和商店： <script setup> import {useForm} from "@inertiajs/vue3"; import NumberInput from "@/Components/NumberInput.vue"; import {UseCategoryItemsStore} from "@/Stores/UseCategoryItemsStore.js"; const categoryItemStore = UseCategoryItemsStore() const props = defineProps({balanceItem: Object, errors: Object}) let item = categoryItemStore.getItemById(props.balanceItem); let form = useForm(item); const emit = defineEmits(['update-balance-item']) const submit = () => { form.post(route('balance-item.update'), { preserveScroll: true, onSuccess: () => { item = categoryItemStore.updateItem(form) form = useForm(item) emit('update-balance-item') } }) } </script> 我将此功能添加到我的商店： import {defineStore} from "pinia"; import {ref} from "vue"; export const UseCategoryItemsStore = defineStore('UseCategoryItemsStore', () => { const balanceCategories = ref([]) const totals = ref([]) function getBalanceItems() { axios.get(route('balance-item.index')).then((response) => { balanceCategories.value = response.data // console.log(balanceCategories.value) }) } function getItemById(item) { let category = balanceCategories.value.find((category) => { return category.id === item.item_category_id }) return category.balance_items.find((item_from_store) => { return item_from_store.id === item.id }) } function updateItem(form) { const item = getItemById(form) item.count = form.count item.amount = form.amount item.total = item.count * item.amount return item } function getTotals() { axios.get(route('balance-item.totals')).then((response) => totals.value = response.data) } function getData() { getTotals() getBalanceItems() } getTotals() getBalanceItems() return {balanceCategories, totals, getBalanceItems, getTotals, getData, getItemById, updateItem} }) 假设如果帖子获得 200，我的表单值可用于更新商店和更新表单。这是我能想到的最好的
我弄清楚了如何使用react-bootstrap来显示下拉列表： 我想出了如何使用react-bootstrap来显示下拉列表： <DropdownButton bsStyle="success" title="Choose" onSelect={this.handleSelect} > <MenuItem key="1">Action</MenuItem> <MenuItem key="2">Another action</MenuItem> <MenuItem key="3">Something else here</MenuItem> </DropdownButton> 但是我该如何编写 onSelect 的处理程序来捕获正在选择的选项呢？我尝试了这个，但不知道里面写什么： handleSelect: function () { // what am I suppose to write in there to get the value? }, 还有，有没有办法设置默认选择的选项？ onSelect函数传递所选值 <DropdownButton title='Dropdowna' onSelect={function(evt){console.log(evt)}}> <MenuItem eventKey='abc'>Dropdown link</MenuItem> <MenuItem eventKey={['a', 'b']}>Dropdown link</MenuItem> </DropdownButton> 在这种情况下，如果您选择第一个选项，则会打印“abc”，在第二个选项中您可以看到也可以传入一个对象。 所以在你的代码中 handleSelect: function (evt) { // what am I suppose to write in there to get the value? console.log(evt) }, 我不确定默认值是什么意思，因为这不是一个选择 - 按钮文本是标题属性中的任何内容。如果你想处理默认值，你可以在值为 null 时设置一个值。 您忘记提及 eventKey 作为第二个参数传递，这是获取您单击的值的正确形式： handleSelect: function (evt,evtKey) { // what am I suppose to write in there to get the value? console.log(evtKey) }, 您可能需要针对您的情况使用 FormControl >> 选择组件： <FormControl componentClass="select" placeholder="select"> <option value="select">select</option> <option value="other">...</option> </FormControl> 您应该按如下方式更改handleSelect签名（在组件类中）： handleSelect = (evtKey, evt) => { // Get the selectedIndex in the evtKey variable } 要设置默认值，您需要使用 title 上的 DropdownButton 属性 参考：https://react-bootstrap.github.io/components/dropdowns/
我现在一直在努力了解如何手动更改元素的波纹颜色，但我似乎无法让它以任何方式工作。 我现在一直在努力研究如何手动更改 <mat-input> 元素的波纹颜色，但我似乎无法让它以任何方式工作。 <input matInput type="number" (keydown)="updateManualPage(1)" placeholder="Filter" formControlName="filterParam1"> 我已经尝试了CSS中我能想到的一切，.mat-form-field-underline，.mat-form-field-ripple，包括我使用::after和::before选择器从另一个SO问题/答案中无耻地撕掉的一大块类，尝试使用 ::ng-deep、!important，但似乎没有任何东西可以改变从 @import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"; 导入的蓝色波纹的颜色 编辑：只需更好地阅读 API，所以我发现波纹后出现的边框颜色来自 <mat-form-field> 元素，该元素有一个颜色选择器。但是，该颜色选择器只能具有“primary”、“accent”和“warn”值。所以现在我想知道如何插入自定义颜色。 设法弄清楚了，原来如此 ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::after { border-bottom-color: *X* !important; }
重新渲染次数过多。布局不稳定。 TextareaAutosize 限制渲染次数以防止无限循环
我有一个按以下方式定义的多行 TextField： 我有一个按以下方式定义的多行 TextField： <TextField id="outlined-multiline-flexible" label="Description" multiline rows={10} value={description} onChange={handleChangeDescription} /> 这是handleChangeDescription： function handleChangeDescription(event: { target: { value: SetStateAction<string> } }) { setDescription(event.target.value) } 我知道它基本上是正确的，因为我几乎直接从 MaterialUI 文档中获取它，但我不断收到相同的错误：“Material UI：重新渲染次数过多。布局不稳定。TextareaAutosize 限制渲染数量以防止无限循环”。 奇怪的是，这只发生在我渲染页面，然后从页面上单击，然后单击返回页面时。该错误不会出现在初始渲染中。我真的不知道我能做些什么来解决它。我已经尝试了this线程中的所有内容，但没有任何帮助，所以我真的很感激任何其他建议！！ 我自己也遇到了这个问题，为可能遇到同样问题的其他人发帖。问题在于 React 的 TextAreaAutoSize 组件如何管理其状态。 要解决这个问题，您可以将 fullWidth 属性传递给 textField。
react-hook-form useForm 每次在 Nextjs 页面路由上执行
嗨，我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。 然而，似乎每次都会执行useForm，并且defaultValues是在页面路由中设置的（点击 嗨，我是 Nextjs(v14) 的新手。我想使用react-hook-form 实现多页面表单。 不过，好像每次都会执行useForm，并且在页面路由时设置defaultValues（点击<Link to=XX>）。 如何跨多个页面保存表单数据？ 请帮助我。 这是我的代码。 _app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ); FormProvider.tsx export const FormProvider = ({ children, }: { children: React.ReactNode; }) => { const defaultValues: MyForm = { name: '', description: '' }; const form = useForm({ defaultValues, resolver: zodResolver(MyFormSchema), }); const onSubmit = () => console.log("something to do"); return ( <Form {...form}> <form onSubmit={form.handleSubmit(onSubmit)}>{children}</form> </Form> ); }; 您正在寻找的是跨多个页面维护的某种全局状态。对于这个例子，我将使用 React 的上下文 API，如果这不适合您的用例，您可以找到一些其他状态管理库。 首先，您需要创建一个全局上下文，并在表单提供程序中包含一个全局状态 // FormProvider.tsx import { createContext, useContext, useState } from 'react'; const FormContext = createContext(); // Exported to be used in other components export const useFormContext = () => useContext(FormContext); export const FormProvider = ({ children }) => { const [formData, setFormData] = useState({}); return ( <FormContext.Provider value={{ formData, setFormData }}> {children} </FormContext.Provider> ); }; 现在您需要用 FormProvider 包装您的应用程序 // You are already doing this part //_app.tsx return ( <div> <FormProvider> <Component {...pageProps} /> </FormProvider> </div> ) 现在你可以像这样使用它了。请记住，您将更新表单的全局状态，该状态将在您的所有页面上发生变化。 // In your form component import { useForm } from 'react-hook-form'; import { useFormContext } from '../path/to/formContext'; const MyFormComponent = () => { const { formData, setFormData } = useFormContext(); const { register, handleSubmit } = useForm({ defaultValues: formData, resolver: zodResolver(MyFormSchema), }); const onSubmit = (data) => { setFormData(data); // Handle form submission }; return ( <form onSubmit={handleSubmit(onSubmit)}> {/* Form fields */} </form> ); }; 您可以从其他页面访问数据的示例 // In another page or component import { useFormContext } from '../path/to/formContext'; const AnotherPage = () => { const { formData } = useFormContext(); // Use formData as needed };