问题标签 [react-hook-form]

我正在尝试在自由独奏模式下使用 Material UI 的自动完成功能作为一种组合输入。用户应该能够通过自动完成选择建议的选项，或者如果没有选项可用，则输入值应用作最终表单值。

问题：

案例一：自动完成工作并建议可以选择和提交的选项，但是当输入具有自定义值时，它不会被提交。

https://codesandbox.io/s/autocomplete-free-solo-case-1-i7kin?file=/demo.js

案例二：从自动完成和自定义输入值中选择的选项已提交但自动完成下拉菜单不再显示建议，而是在整个选择输入时保持打开状态

https://codesandbox.io/s/autocomplete-free-solo-case-2-uk9db?file=/demo.js

我可以接受第二种情况，因为我的自动完成列表只有几个选项，但如果有人有一些提示或解决方案，我会非常感激。

我想在输入字段上添加接受和拒绝按钮，这些按钮仅在用户专注于输入字段时才会出现。类似于我们在 Jira 中得到的。

我尝试使用 material-ui 创建一个类似的组件。问题是，当我专注于输入字段时，它会显示这两个按钮，但后来我无法在输入框中输入。

有人可以帮我吗？下面是一个代码沙箱： https ://codesandbox.io/s/material-demo-2hrc4?file=/demo.tsx

https://codesandbox.io/s/dhananjay-rtb8r?file=/src/App.js

请查看示例代码。我想根据州绑定城市

我正在尝试将 react-hook-form 与我的自定义日期选择器一起使用，但我只看到这个示例（Is it possible to use react-datepicker with react hooks forms?），它使用的是默认的 react-date-picker。

但是，它仅适用于原始的 react-date-picker。我用我的自定义日期选择器尝试了同样的方法，但它不起作用......

这是我自定义的日期选择器：

这是我如何将 react-hook-form 与自定义的日期选择器一起使用：

提交表单后，“生日”值未定义。我还需要在我的自定义日期选择器中添加任何道具吗？

{生日：未定义，名字：“迈克”，姓氏：“史密斯”}

我正在 Typescript 中使用 react-hook-form 实现一个基本的用户注册表单。以下代码工作正常：

我遇到麻烦的地方是尝试将类型参数与useForm. 当我将相关行更改为：

...编译失败Expected 0 type arguments, but got 2.

现在，react-hook-form 的 API 文档表明这是可行的，无论如何，文档可能是错误的，而且通常是错误的。但我也在查看源代码，react-hook-form v5.6.1，这是我确认我正在使用的，这就是源代码中的useForm定义：

所以我认为这些文档毕竟是对的，而我做错了什么。一点帮助？

我有组件，在每个组件中，我都有一个表单，点击下一个我打开一个新表单（调用新组件），当它是最后一个时，我将其更改为提交。

我想要达到的目标

1：在每次下一步和返回单击时，我想使用 react-form-hook 验证我的表单

2：点击提交我应该能够看到所有的数据

3：点击后面的数据不应该从输入中丢失

问题

因此，对于验证，我使用react-hook-form，因为它使用起来非常简单，但是在这里我无法找到，因为我的按钮不在它们位于主要组件中的表单内，所以我将如何验证并提交表单提交点击所有数据。

我的代码

我的完整代码代码沙箱

我只是在寻找一种好的方法，因为这里我不能在每个组件中都提交，因为我必须在顶部显示步骤。

我正在尝试使用自定义Material-UI Autocomplete组件并将其连接到react-hook-form.

TLDR：需要在没有 react-hook-form 控制器的情况下使用 MUI AutocompletedefaultValue

我的自定义Autocomplete组件接受一个对象，其结构{_id:'', name: ''}显示名称并_id在选择选项时返回。Autocomplete作品就好了。

为了使其与我一起工作，react-hook-form我将 设置setValues为onChangein 的处理程序Autocomplete并手动注册组件，useEffect如下所示

这工作正常，但我不想有useEffect钩子，只是直接以某种方式使用寄存器。

接下来我尝试使用Controller组件 fromreact-hook-form在表单中正确注册字段而不使用useEffect钩子

我已经更改了onChange组件Autocomplete中的直接返回值，但它似乎不起作用。

使用inputRef={register}on<TextField/>不会为我削减它，因为我想保存_id而不是name

这里是一个包含两种情况的工作沙箱。第一个 withuseEffect和setValueinAutocomplete有效。我使用Controller组件的第二次尝试

任何帮助表示赞赏。

乐

在比尔用 MUI 自动完成的工作沙箱发表评论后，我设法得到了一个功能结果

唯一的问题是我MUI Error在控制台中得到一个

Material-UI：一个组件正在将 Autocomplete 的非受控值状态更改为被控制。

我试图defaultValue为它设置一个，但它仍然表现得像那样。此外，由于不需要表单中的这些字段，我也不想从选项数组中设置默认值。

更新的沙盒在这里

任何帮助仍然非常感谢

我正在使用 React-Hook-Form 创建一个表单。我已设置useForm({mode: 'onBlur'})立即触发验证并在用户 onBlur 元素后立即显示错误消息。对于输入文本字段，它工作正常。但是，它不适用于我的<Controller />元素，它包装了一个自定义的<Select />.

以下是我的代码：

以下是<Select />元素：

点击选择后，选择空值，然后模糊，它不会显示错误消息onBlur。

有什么方法可以进行触发器验证并在 Blur 上显示错误消息？我错过了什么吗？

我有一个前端反应应用程序将数据发布到服务器。使用 CKEditor 和 React Hook 表单。当我在发布之前 console.log 数据时，我得到了理想的 html 格式文本 ( <p><strong>)。但是，当我检查数据时，我看到了 html 实体 ( <p>...s<strong>)。我希望服务器接收我在前端看到的数据，作为 html 格式的文本，这样我就可以在应用程序的其他部分正确显示它。这是相关的代码。

创建文章.jsx

有前端解决方案吗？

我正在替换select我的应用程序中的一些输入以使用react-select. 在使用之前react-select，我正在使用该功能清除提交时表单中的选定选项，.reset()现在似乎没有任何影响。

我试图将一个变量存储在onSubmit函数中，null并将其作为要设置为defaultValue道具的值，因为Controller它认为它会重置事物。然而这并没有奏效。什么是处理这个问题的干净方法？

父表单组件：

孩子使用Selectfrom react-select: