如何使用反應驗證動態輸入字段

Question

我一直在嘗試為重復的名稱輸入實現驗證邏輯。 我已經顯示了一些用於從數組輸入名稱的動態輸入字段，並嘗試在其上添加驗證。

期望：

1. 當用戶在字段上鍵入重復名稱時，輸入字段旁邊會顯示驗證錯誤。
2. 驗證錯誤應與包含重復輸入（名稱）的所有字段一起顯示
3. 每個輸入字段都應進行驗證。

到目前為止我所做的嘗試：我在此處添加鏈接以獲取實現的詳細信息。 我正在檢查 onChange 處理程序上的輸入字段，並根據該字段的每個索引顯示錯誤。 我目前得到的是：

我想要實現的是：如果每個字段包含重復值，則應在每個字段上顯示錯誤。 不像最初只顯示錯誤，並且每當我們從該字段移出時，驗證都不起作用（目前，我正在這樣做，但這是錯誤的）。

有人可以幫忙嗎？ 我也不確定基於我當前的實現來實現這種類型的驗證的最佳方式是什么。 任何幫助將不勝感激。 提前致謝。

這是實現的鏈接： https://codesandbox.io/s/pedantic-bird-r979m?file=/src/Input.jsx:0-1648

Answer 1

好吧，您可以將錯誤定義為一個數組，Input 的每個索引都是數組的一個元素。

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