从 'matter-js' 导入 { Bodies, Composite, Engine, Mouse, MouseConstraint, Render, Runner }；从 'react' 导入 React, { useEffect }; 从 './styles' 导入 * as S；从“../../.....”导入颤振

useForm 和react-hook-form 在我与NextJs 一起使用时出现问题

我正在 NextJs 中编码，我需要使用“useForm”，但它不断给出错误......“无法解析“react-hook-form”。”请帮忙。从“反应”导入反应；导入{使用...

如何在小鼠多重插补后创建相关矩阵

我正在使用 mouse 包来创建多重插补。我想创建一个相关矩阵（以及相关系数的 p 值矩阵。我使用 mouseadds::micombine.cor 来执行此操作...

如果 markdown frontmatter 中的值（对于博客文章）键：值对是特定字符串，则运行 git hook

我有一个 git hook 预提交，如果文件在我的 AstroPaper 博客中被修改，它会更新 modDatetime。 # 修改文件，更新modDatetime git diff --cached --name-status | git diff --cached --name-status | git diff --cached --name-status | egrep -i &q...

如何使用 yup 不允许在 React hook 中使用特殊字符和空格

代码如下： { 标签：“名称”，名称：“名称”，占位符：'名称'，类型：“文本”，规则： yup.string() .required('姓名为必填项...

使用 Yup

我正在创建一个身份验证表单，并且正在引用有关如何使用 yup 验证我的输入的react-hook-form 文档。据我所知，一切都与实施提供的几乎相同...

如何在react-hook-form中将数值注册为嵌套属性？

我有一个名为 Totals 的属性，它应该包含多个嵌套对象作为属性。这是我想要的表单结构： { 总计：{ 0：{ 值：0， }, }, }; 然而...

无法在react useEffect hook 中更新状态

即使使用了异步，我也无法更新useEffect中的数据。注意：我不想在 useEffect 中添加数据作为依赖项，因为我只想获取一次数据从“react&...

如何在react-hook-form中将数字值注册为嵌套属性

我有一个名为 Totals 的属性，它应该包含多个嵌套对象作为属性。这是我想要的表单结构： { 总计：{ 0：{ 值：0， }, }, }; 然而...

如何编写 helm hook 来删除持久卷

我是 k8s 和 helm 的新手。我正在部署一个名为 zeebe 的开源分布式软件，它为 k8s 部署提供 helm 图表。我发现即使在执行 helm uninstall comm之后...

PlateJS 序列化 HTML

我正在尝试这样做，以便当我单击按钮时，我可以获得一个 html 字符串。一般来说，这个富文本编辑器会在React-Hook-Form内部，当提交表单时，它会保存

如何在 Git-Bash 终端中读取用户输入并传递给 Python 脚本

在开始之前我只是想告诉大家我是Python的初学者:) 我正在通过 git bash 运行 python 脚本，同时提交代码更改（使用 git hook[commit-message]），我想阅读...

TypeScript 自定义 useStateIfMounted React Hook - 并非类型 'T | 的所有组成部分((value: SetStateAction<T>) => void)' 可调用

完整错误：并非所有成分都是 'T | 类型((value: SetStateAction) => void)' 是可调用的。 “T”类型没有呼叫签名。概括：我正在尝试创建一个 useStateIfMounted c...

了解 WooCommerce 主题 - 使用我自己的主题

新闻：在上面的答案之后，我可以再改变一点，但我仍然无法改变我需要的一切。现在最大的问题是：如何删除操作（@hooked）的内容并将其放入新的hook中...

如何在 Redux Saga 中使用 React Hook？

我正在为我的应用程序设置语言。但我有一个问题。我使用 React.useContext() 来设置语言。但是当我在 saga 的 toast 中修复它时，它会记录： [错误：无效的挂钩调用。 Hooks 只能在 ins 中调用...

Acf用户：通过acf用户编号字段搜索用户

我正在尝试在管理屏幕中的用户中显示 ACF 字段，并且我能够实现这一点。现在我想在正常的 WordPress 用户搜索中通过这个 ACF 字段搜索用户。有没有 Hook / 代码片段...

禁用按钮时的角度显示工具提示

<button [disabled]="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)" class="lmn-btn lmn-btn-primary" aria-label="Update" (click)="updateSelectedScopes()" [mtTooltip]="disabledContent" > Update </button> <ng-container *ngIf="(!dataConceptSummmaryFlag || dataConceptSummmaryFlag === false) && (!selectedLOBFlag || selectedLOBFlag === false) && (!adsListFlag || adsListFlag === false)"> <ng-template #disabledContent>No New Scopes Values Selected</ng-template> </ng-container> 如果在该条件下禁用按钮，如何在悬停时显示工具提示文本，并且当我将鼠标悬停在其上时，我会看到红色关闭图标。这是我尝试过的，但没有成功将此添加到覆盖材质样式的文件中： // this workaround allows for the tooltips to appear on disabled buttons (since mouse events aren't fired for them) button:disabled.mat-mdc-tooltip-trigger { pointer-events: auto !important; // remove the ripple effect on hover > span:first-child { display: none; } } 悬停时它将显示没有波纹背景的工具提示。

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 };

具有多个值的JS var

有件事我无法理解：我有一个打开同一页面的功能，但具有不同的内容，具体取决于菜单中单击的按钮：有件事我无法理解：我有一个打开同一页面的功能<div id="page">但具有不同的内容，具体取决于菜单中单击的按钮： <nav> <button onclick="openPage(1)">PAGE 1</button> <button onclick="openPage(2)">PAGE 2</button> <button onclick="openPage(3)">PAGE 3</button> </nav> 然后是函数： function openPage(p){ var move=0; // define a var for USER action if(p==1){ document.getElementById('page').innerHTML = text_1; // content preloaded } else if(p==2){ document.getElementById('page').innerHTML = text_2; } else if(p==3){ document.getElementById('page').innerHTML = text_3; } // then on the top of the page (absolute + z-index) I add a HTML object: document.getElementById('page').innerHTML += '<aside id="pictures">content</aside>'; // what I'm now trying to do is to remove this object once USER move its mouse on it document.getElementById('pictures').addEventListener("mousemove",function(event) { setTimeout(function(){ move+=1; // increase the val each second },1e3) console.log('move'+p+' = '+move) // control value if(move>100){ document.getElementById('pictures').style.display = "none"; // OK, it works move=0; // reinit the var } }); } 现在惊喜：第 1 页的控制台 move1 = 0 move1 = 1 ... move1 = 99 move1 = 100 // 'pictures' disappears 第 2 页的控制台 move1 = 41 move2 = 0 ... move1 = 58 move1 = 17 ... move1 = 100 // 'pictures' disappears move2 = 59 第 3 页的控制台 move1 = 15 move2 = 88 move3 = 0 ... move1 = 37 move2 = 100 // 'pictures' disappears move3 = 12 ... 我的 var 'move' 同时获得 3 个值...这怎么可能？您的问题的原因是您每次调用 openPage 函数时都会添加一个事件侦听器。这意味着，如果您单击多个按钮，每个按钮都会有自己的事件侦听器附加到 #pictures 元素。现在，当触发 mousemove 事件时，所有这些侦听器将同时执行，导致 move 变量每秒递增多次。解决此问题的方法是在添加新事件侦听器之前先删除现有的事件侦听器。 let handler; // to hold the event listener function const pictureEl = document.getElementById('pictures'); function openPage(p){ // Remove existing event listener if (handler) { // <-- Check here pictureEl.removeEventListener("mousemove", handler); } handler = function(event) { // ...Rest } }; // Add new event listener pictureEl.addEventListener("mousemove", handler); // ...rest 找到了另一种（最简单的？）方法： var move=0; // placed out of functions function openPage(p){ .... (same as previous) getElementById('pictures').addEventListener("mousemove",outPicts); // change } // put mousemove event in another function: function outPicts(p){ setTimeout(function(){ move+=1; },1e3) console.log('move = '+move) if(move>100){ document.getElementById('pictures').style.display = "none"; // then remove event getElementById('pictures').removeEventListener("mousemove",outPicts); move=0; // reinit the var } } 按预期工作

mouse-hook 相关问题

最新问题