问题标签 [react-hook-form]

我是 React 新手，我的第一个项目涉及创建一个表单（使用react-hook-form创建），其中包括日期选择器（使用React Datepicker）。到目前为止一切正常，除了我的日期选择器，当点击它时不会用新选择的日期更新表单字段。

项目结构如下：

FormDate.js

我已经根据react-hook-form Controller 文档使用了 Controller 组件，因为我最终需要使用条件逻辑并认为这是正确的做法？但除此之外，它似乎与日期范围示例代码相同。我从其他地方收到了一个提示，问题如下：

问题是您包含日期选择器的控制器组件。它们正在使用 onChange 回调并且不允许它传播子组件。

通过阅读文档，您只能在其中使用不受控制的组件，例如 html 标签，任何需要 React 直接操作其状态的东西都可以在这里发挥作用。

您必须查看从表单元素（例如日期选择器）传递所需的数据，备份到主表单并编译您需要手动提交的内容。您可以使用回调、React.context 或其他一些全局状态管理系统（如 Redux）将数据从组件传回。就个人而言，我建议在应用程序的复杂性仍然可控的情况下坚持回调，并且仅在事情开始变得非常复杂时才查看其他选项。

有没有人可以帮助我（作为菜鸟！）了解如何做到这一点，也许有一个例子？或者有什么文件可以帮助我吗？

非常感谢，

凯蒂

在通过钩子制作登录/注册组件时，我用钩子为登录、注销、注册和用户制作了单独的功能。

因为钩子对我来说更容易，所以在执行 npm start 后，没有显示错误。

应用程序.js：

登录.js：

注销.js：

注册.js：

用户.js：

没有显示错误，但是当我尝试注册用户名时，它显示TypeError: setUser is not a function reacjs in register.js 行<form onSubmit={e=>{e.preventDefault();setUser(username)}}>

我对 reactJS 很陌生，我知道我在调用 setUser 时做错了......但它似乎是 react 自己的功能。

如果你给我任何解释的解决方案，这将是一个很好的学习方式。我想修改代码并以我自己可以理解的方式编写这些代码。

提前谢谢

将创建博客帖子，并且可以选择删除帖子。为此，我正在使用钩子。

应用程序.js：

创建post.js：

博客.js：

执行 npm start 后没有显示错误。但在浏览器中，TypeError: props.postData.map is not a function显示在 Blog.js

有人可以帮我吗？我被困在这里似乎永远。

我最近开始使用 reactjs，昨天开始做钩子。所以请帮忙。

我有一个 React 表单，我希望用户能够根据他们在表单中选择的选项来控制 div 的内容。我希望这发生在 onChange 上。

例如：如果用户在选择字段中输入“布丁”，则 div 将显示布丁列表，例如冰淇淋、蛋糕、苹果碎。如果用户输入“主菜”，该 div 将显示主菜列表，例如牛排、鸡肉、火腿。

这个概念看起来很简单，但我是 React 新手，而且更复杂的是我正在使用React Hook Form并且需要使用控制器，因为我将使用条件逻辑来显示和隐藏表单字段。话虽如此，我不确定这是否相关？！

应用结构

表单选择.js

MenuItems.js

有没有人可以建议我需要对我的代码做些什么来完成这项工作？

非常感谢，

凯蒂

无论如何在反应钩子形式中设置类型？一切都以字符串形式返回，即使是时间选择器。

如果对象是数字，如果类型是数字等，那就太好了。

我正在尝试反应钩子形式。无论如何在提交时不重置表单？每次我点击提交表单都会重置。

从“反应”导入反应；从“react-hook-form”导入 { useForm }；

我正在阻止某些东西，这根本没有意义。对于熟悉 react-hook-form 的您，我正在尝试创建一个根据状态对象呈现的动态字段数组。问题是，它在第​​一次渲染时渲染，但在第二次渲染时不渲染。

例子：

不渲染 subK。

但如果我这样做

它也按预期呈现。

我究竟做错了什么？

是否可以将 react-datepicker 与反应钩子形式一起使用？我尝试了以下示例：

https://codesandbox.io/s/awesome-shape-j0747?fontsize=14&hidenavigation=1&theme=dark

但没有运气。

在处理 React-hook-form 时进行输入字段匹配验证的最佳实践是什么？例如，匹配email输入时等。

在使用 React-hook-form 研究电子邮件匹配验证时，在尝试通过其验证方法将错误消息与“耦合元素”分开时发现了一个问题。唯一需要一个ref参数用于 React-hook-form register，同时需要用于useRef访问current.valuefor 值匹配，如下：

虽然在进行输入字段匹配时，这种模式似乎是一种选择，但它不能很好地与 React-hook-form 配合使用！

例如，错误消息仅与一个输入案例耦合，并且没有针对每个独立字段的单独消息，或者输入字段之一没有分配给它的寄存器，这意味着required未设置属性等。

所以，我正在寻找一个好的实践或模式来解决：

• 保持错误消息由输入字段分隔
• 验证方法，在测试匹配时应该能够以符合 React 的方式引用双字段值，而不是通过 DOM（document.querySelector 等）

我想在我的 Gatsby 项目中使用 FlexyForm 创建一个联系表单，以便通过电子邮件发送信息。它的设置非常简单，您只需要添加到普通表单 HTML 标记 -method="post" action="https://www.flexyform.com/f/flexyformkey"

所以我有一个这样的表单正在运行，然后我想添加表单验证，所以我使用了 react-hook-form 并且验证效果很好，但是在验证之后它不会向 FlexyForm 发出 post 请求。

我填写表格以满足验证并点击发送按钮，但除了将寄存器记录到控制台之外，没有任何反应。如果没有 react-hook-form，它通常会将我重定向到我将 FlexyForm 设置为在接收数据后重定向的任何位置。

沙箱：https ://codesandbox.io/s/nervous-pine-o2z5m （^^ 它不包含密钥，原因很明显）

后来我想我应该用fetch它在里面发出一个帖子请求，onSubmit但我不知道在里面放什么。

我对 React 和 Gatsby 很陌生，所以很明显我错过了一些东西。