问题标签 [react-hook-form]
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.
javascript - 当我折叠、添加或删除面板时,React-hook-form 字段值会丢失
我正在使用材质 ui 扩展面板。我正在尝试从添加按钮单击添加新面板并从删除按钮单击删除面板,它工作正常,问题是,当我展开、折叠、添加或删除面板时,表单字段值会丢失。我认为这是由于重新渲染或刷新而发生的。
让我知道我们如何实现上述功能,以便用户可以轻松导航到任何面板从那里添加一些细节并移动到另一个面板并在那里添加一些细节,但是在将细节从一个面板添加到另一个面板时,如果用户必须存在价值再次转到那个特定的面板。
看看下面的示例代码
https://codesandbox.io/s/dhanajayx-3n73x?file=/src/App.js:146-160
任何努力都受到高度赞赏
reactjs - 如何使用带有道具和材质 UI 的 react-hook-form
我正在使用 Material UI Select 作为可重用组件,我想通过将道具从父组件传递到子组件来使用 react-hook-form 对其进行验证。到目前为止,我已经尝试从 RHF 使用,并将一些道具传递给孩子,但是当我选择选项时,错误不会消失。这是我的代码
因此,当我在未选择任何内容的情况下提交表单时,会弹出错误。但是当我选择一个选项时,错误将仍然存在。我究竟做错了什么?
forms - 如何使用 react-hook-form 为 KeyboardDatePicker 设置条件默认值?
我有一个包含KeyboardDatePicker
from的表单,material UI
我希望它有一个空字符串值 ( ""
) 作为默认值,当没有值传递给useForm
该字段的挂钩时。
到目前为止,这是我的实现:
日期选择器输入字段:
这是我的表格钩子:
我正在使用 a project
but project
can be设置表单的默认值,null or undefined
并且date
属性project
can also be null
。如果是这种情况,我希望默认值为空字符串。
可悲的是,通过这个实现,当我从一个空字段中选择一个日期时,Date
我收到一个警告,告诉我我不应该将 text 类型的不受控制的输入更改为受控的输入,并且label
输入堆栈的值高于 value :
DatePicker
甚至可以在不破坏所有内容的情况下将空字符串作为 a 的默认值吗?如果可能,应该如何实施?
reactjs - KendoReact 和 react-hook-form
我在使用带有react-hook-form库的KendoReact组件时遇到问题:
react-hook-form示例使用 MaterialUI 组件来显示第三方库的集成,并且看起来工作正常。使用 Kendo Input 组件时,在输入控件中键入任何内容都会导致控件显示[object Object]
而不是键入的值。这是因为要在控件上设置的值是event
对象而不是实际值。
我找不到解决方法,希望其他人确实找到了。
reactjs - 使用 useEffect 反应钩子运行到无限循环
我想在表单提交时调用函数“addData”
javascript - Material UI + React Form Hook + 多个复选框 + 默认选中
我正在尝试构建一个可以容纳多个“分组”复选框的表单react-form-hook
Material UI
。
复选框是从 HTTP 请求异步创建的。
我想提供一个对象 ID 数组作为默认值:
defaultValues: { boat_ids: trip?.boats.map(boat => boat.id.toString()) || [] }
此外,当我选择或取消选择一个复选框时,我想将对象的 ID添加/删除到react-hook-form
.
IE。( boat_ids: [25, 29, 4]
)
我怎样才能做到这一点?
这是我试图重现该问题的示例。
奖励点,使用 Yup 验证最小选定复选框
boat_ids: Yup.array() .min(2, "")
javascript - React Hook 表单控制器问题
我一直在使用带有本机元素的反应钩子表单库,但想使用 Controller API 切换到自定义组件。
我的自定义输入组件更新 React 状态但没有更新表单状态中的 ref 时遇到问题。因此,必填字段始终被标记为无效,我无法提交表单。
这是我的问题的演示:https ://codesandbox.io/s/react-hook-form-controller-bofv5
它应该在提交时注销表单数据 - 但提交永远不会发生,因为表单无效。
react-hook-form - 如何在智能表单组件中使用 react-hook-form 验证自定义输入?
我想使用 react-hook-form 验证输入。但我无法在注册中发送验证规则。如何解决这个问题
https://codesandbox.io/s/react-hook-form-smart-form-component-vpsc0
javascript - React Hook Form - 手动更新预注册对象中的一些字段
我正在处理多选项卡表单,并且我遇到了仅更新当前上下文中的一些键的问题。
例子:
在默认值中,我有 3 个键:
我已经为 key3 使用了 useFieldArray,但我希望能够从每个对象中只更改 1 个键,其余的应该从当前上下文中填充。但是没有办法这样做——所有没有被渲染的东西都会丢失。还有第二个选项——我们可以手动注册key3。但是,不可能从这个数组中更新任何东西。
示例: https ://codesandbox.io/s/rhf-nested-fields-from-default-5nlop?file=/src/index.js
提前致谢 :-)