![](/img/trans.png)
[英]react-hook-form handling server-side errors in handleSubmit
[英]Handling errors in react-hook-form
根据 react-hook-form 的文档,我可以使用像“xxx.yyy”这样的输入元素的名称,这将导致我准备好的数据为
{ xxx: { yyy: value }}
但是当我尝试使用带有“错误”的此功能时,我无法使用它。 即我不能在下面写:
{errors.xxx.yyy && <span>This field is required</span>}
因为我得到“无法读取未定义的属性‘yyy’”。
文档说我应该使用这个链接运算符,?。 ,所以我试试:
{errors?.xxx?.yyy && <span>This field is required</span>}
但是如果省略了必需的输入,页面上将不会显示任何内容。 我可以看到该机制阻止提交表单,直到我在该字段中写入一些内容,这很好,但是为什么我没有在页面上收到错误消息?
这真的取决于您使用的是哪个版本。
V3:平面错误对象
errors['xxx.yyyy']
V4:具有更好类型支持的嵌套错误对象
errors?.xxx?.yyyy
我们还构建了一个ErrorMessage
组件,您可能会发现它很有用。
好的,我自己找到了答案。 我应该使用这种形式:
{errors['xxx.yyy'] && 该字段为必填项}
然后一切正常:-)
你不想花你的编码时间。 您可以手动使用@hookform/error-message
而不是代码。 这很容易。 它会处理这些错误。 只需传递 react-hook-form 给出的错误对象并传递要显示错误消息的属性名称。
<ErrorMessage errors={errors} name="xxx.yyy" message="This is required" />
或者
如果您想根据需要自定义您的消息,您可以按照您的需要进行render
,如下所示。 认为您想用红色自定义 css 类加粗并显示无效。 然后您可以根据需要进行渲染。
<ErrorMessage render={({message}) => <div className="invalid-feedback d-block"><b> {message} </b></div>} errors={errors} name="xxx.yyy"/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.