我的代碼中有一個相當復雜的結構,它在 const matchSuggestions 中。此構造負責自動建議。例如:有幾個男性名字(Adam、Adrian、Arnold、Mike)。用戶輸入第一個字母“A”并看到自動建議 - Adam、Adrian、Arnold。然后他輸入字母“D”并保持自動建議 - 亞當,阿德里安。等等。
是否有可能以某種方式簡化這部分代碼?
const onChange = (e) => {
const { value } = e.target;
setInput(value)
if(value.length < 1) { setSuggestedTags([]); setIsValid([]);return; }
const matchedSuggestions = tagSuggestions.filter((s) => {
return s.slice(0, 2).search(value.slice(0, 2)) > -1
&& s.slice(0, 1).search(value.slice(0, 1)) > -1
&& s.slice(0, 3).search(value.slice(0, 3)) > -1
&& !tags.includes(s)
})
setSuggestedTags(matchedSuggestions);
if (e.target.value) {
setIsValid(() => /^[1-5][0-9]?[0-9]?$|^100$/.test(e.target.value));
} else {
setIsValid(true);
}
setInput(value);
};
uj5u.com熱心網友回復:
您可以獲取輸入字串的長度并將其用作切片的索引。更好的是,您可以使用startsWith并且如果想要標準化為大寫或小寫,例如
value = value.toLowerCase(); // normalize
tagSuggestions.filter(s =>
s.toLowerCase().startsWith(value) && // or includes(value) in case you want to validate part of the string
!tags.includes(s) // what is this for?
);
轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/495083.html
標籤:javascript 反应
上一篇:如何使道具等于尚不存在的狀態?
