如何使用 React 验证动态输入字段
How to validate on dynamic input fields using react
我一直在尝试为重复名称输入实施验证逻辑。我已经显示了一些用于从数组输入名称的动态输入字段，并尝试在其上添加验证。
期望：
- 当用户在字段中键入重复名称时，输入字段旁边会显示验证错误。
- 所有包含重复输入（名称）的字段都应显示验证错误
- 每个输入字段都应进行验证。
到目前为止我尝试过的：
我在这里添加 link 以获取实现的详细信息。我正在检查 onChange 处理程序上的输入字段，并根据字段的每个索引显示错误。我目前得到的是：
我想要实现的是：如果每个字段包含重复值，则应在每个字段上显示错误。不像最初显示错误，每当我们离开该字段时，验证都不起作用（目前，我遇到了错误）。
有人可以帮忙吗？我也不确定根据我当前的实现，实现此类验证的最佳方式是什么。任何帮助将不胜感激。提前致谢。
下面是实现的 link：
https://codesandbox.io/s/pedantic-bird-r979m?file=/src/Input.jsx:0-1648
嗯，你可以把errors定义成一个数组，Input的每个索引都是数组的一个元素。
https://codesandbox.io/s/youthful-cdn-83t35?file=/src/Input.jsx
我一直在尝试为重复名称输入实施验证逻辑。我已经显示了一些用于从数组输入名称的动态输入字段，并尝试在其上添加验证。
期望：
- 当用户在字段中键入重复名称时，输入字段旁边会显示验证错误。
- 所有包含重复输入（名称）的字段都应显示验证错误
- 每个输入字段都应进行验证。
到目前为止我尝试过的：
我在这里添加 link 以获取实现的详细信息。我正在检查 onChange 处理程序上的输入字段，并根据字段的每个索引显示错误。我目前得到的是：
我想要实现的是：如果每个字段包含重复值，则应在每个字段上显示错误。不像最初显示错误，每当我们离开该字段时，验证都不起作用（目前，我遇到了错误）。
有人可以帮忙吗？我也不确定根据我当前的实现，实现此类验证的最佳方式是什么。任何帮助将不胜感激。提前致谢。
下面是实现的 link： https://codesandbox.io/s/pedantic-bird-r979m?file=/src/Input.jsx:0-1648
嗯，你可以把errors定义成一个数组，Input的每个索引都是数组的一个元素。
https://codesandbox.io/s/youthful-cdn-83t35?file=/src/Input.jsx