如何使用反应验证动态输入字段

Question

我一直在尝试实现重复名称输入的验证逻辑。我已经显示了一些用于从数组输入名称的动态输入字段，并尝试在其上添加验证。

期望：

1. 当用户在字段中输入重复名称时，输入字段旁边会显示验证错误。
2. 验证错误应与包含重复输入（名称）的所有字段一起显示
3. 应在每个输入字段上进行验证。

到目前为止我所做的尝试： 我在此处添加链接以获取实现的详细信息。我正在检查 onChange 处理程序上的输入字段，并根据该字段的每个索引显示错误。我目前得到的是：

我想要实现的是：如果每个字段包含重复值，则应在每个字段上显示错误。不像最初只显示错误，并且每当我们从该字段移出时，验证都不起作用（目前，我有，但它是错误的）。

有人可以帮忙吗？我也不确定基于我当前的实现来实现这种类型的验证的最佳方法是什么。任何帮助将不胜感激。提前致谢。

这里是实现的链接： https://codesandbox.io/s/pedantic-bird-r979m?file=/src/Input.jsx:0-1648

Answer 1

好吧，你可以将errors定义为一个数组，Input的每个索引都是数组的一个元素。

https://codesandbox.io/s/youthful-cdn-83t35?file=/src/Input.jsx