如何解决使用模板文字访问输入名称属性反应
我在使用错误(React Hook Form提供的对象)来显示输入字段的验证消息(当必需的输入字段为空)时遇到一些问题。
{
inputs.map((name) => (
<div key={name}>
<div style={{ marginTop: "3px" }}>
<input
name={`Chamfer Set.${name}`}
ref={register({ required: true })}
/>
</div>
{errors[`Chamfer Set.${name}`] && (
<span>Please enter a value for {name}.</span>
)}
</div>
));
}
基本上,我必须将错误链接到输入名称属性,在这种情况下,我使用的是模板文字。但这是行不通的,我想这与字面量有关,但是我不太喜欢它。你们有什么主意吗?
如果使用console.log(错误),则具有以下结构:
解决方法
要访问错误属性,只需替换:
errors[`Chamfer Set.${name}`]
通过:
errors["Chamfer Set"] && errors["Chamfer Set"][`${name}`]
,
如@Micheal所述,尝试
{
inputs.map((name) => (
<div key={name}>
<div style={{ marginTop: "3px" }}>
<input
name={`Chamfer Set.${name}`}
ref={register({ required: true })}
/>
</div>
{errors[`Chamfer Set`][`${name}`] && (
<span>Please enter a value for {name}.</span>
)}
</div>
));
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。