用戶可以添加輸入欄位（max2）。如果用戶在第二個輸入中輸入與第一個輸入相同的單詞，我想顯示錯誤驗證。
export default function AddSubtitlesTable() {
const [inputList, setInputList] = useState([{ items: "" }]);
// const [errorValidation, setErrorValidation] = useState(false)
const handleAddClick = () => {
setInputList([...inputList, { items: "" }]);
};
const handleItemChanged = (event, index) => {
const value = event.target.value;
const list = [...inputList];
list[index].items = value;
setInputList(list)
}
const handleRemoveClick = (index) => {
const list = [...inputList];
list.splice(index, 1);
setInputList(list);
};
我的想法是獲取先前的值并將其與用戶輸入的當前值進行比較。我該如何解決這個問題？
uj5u.com熱心網友回復：
很簡單，只需添加以下代碼來檢查您的 inputList 是否已經具有該值：
const handleItemChanged = (event, index) => {
const value = event.target.value;
const list = [...inputList];
if(list.filter(f=> f.items === value).length > 0){
//you can trigger a manual validation
setErrorValidation(true)
}
else{
setErrorValidation(false)
}
//this still allows you to enter text on the field
list[index].items = value;
setInputList(list)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/455453.html
標籤：反应
上一篇：如何在React中使用Chart.js創建堆疊的水平條形圖？
下一篇：路由在React.js中回傳白頁