您需要一個將您限制為 10 個逗號的輸入自定義。
當它是10時，應該可以修改它。
目前，輸入事件的作業速度更快，因此添加了額外的逗號，因此無法對其進行編輯。
我的代碼
// input props
value={relationSearch}
onChange={(e) => handleOnChangeInput(e)}
onKeyPress={handleKeyPress}
//callbackfunction
const relationCallbackFunction = {
handleOnChangeInput: (e) => {
setRelationSearch(e.target.value);
},
};
// input event area
const handleOnChangeInput = (e) => {
relationCallbackFunction.handleOnChangeInput(e);
};
const handleKeyPress = (e) => {
const currentStr = relationSearch.split(',');
console.log(e.target.value);
if (currentStr.length > 11) {
e.target.value ='';
}
};
uj5u.com熱心網友回復：
handleKeyPress從輸入道具中移除函式并更新relationCallbackFunction物件。
const relationCallbackFunction = {
handleOnChangeInput: (e) => {
let value = e.target.value;
const currentStr = value.split(",");
if (currentStr.length <= 10) {
setRelationSearch(value);
}
}
};
uj5u.com熱心網友回復：
你可以通過幾種方式做到這一點，但這里有一個簡單的解決方案。這里的重要部分是確保您將輸入設定為受控輸入，您可以在其中提供來自 react 的值。
我們需要一個函式來實作你的邏輯。它應該接受一個字串和您想要的逗號總數，并將該字串限制為逗號數量。
下面是一個非常簡單的函式。它使用逗號分割字串，確保結果陣列的長度為 10，并從結果陣列中回傳一個連接字串。
function ensureCommas(str, commas = 10) {
const commaArray = str.split(',');
const reduced = commaArray.slice(0, commas);
return reduced.join(',');
}
現在使用它。這是一個非常簡單的 App 組件，它將輸入值保持在狀態并將此狀態值提供給輸入，并且有一個 onChange 事件處理程式，它在每次按鍵時呼叫上述函式
import { useState } from "react";
import "./styles.css";
function ensureCommas(str, commas = 10) {
const commaArray = str.split(",");
return commaArray.slice(0, 10);
}
export default function App() {
const [value, setValue] = useState("");
const onInputChange = (e) => {
const inputVal = e.target.value;
const newInputVal= ensurecommas(inputVal , 10);
setValue(newInputVal);
};
return (
<div className="App">
<input value={value} onChange={onInputChange}></input>
</div>
);
}
代碼沙盒
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/415573.html
標籤：