[英]How can I limit the input tag to only 10 Commas?
您需要一个将您限制为 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 ='';
}
};
从输入道具中删除handleKeyPress
function 并更新relationCallbackFunction
object。
const relationCallbackFunction = {
handleOnChangeInput: (e) => {
let value = e.target.value;
const currentStr = value.split(",");
if (currentStr.length <= 10) {
setRelationSearch(value);
}
}
};
你可以通过几种方式做到这一点,但这里有一个简单的解决方案。 这里的重要部分是确保您将输入设置为受控输入,您可以在其中提供来自 react 的值。
我们需要一个 function 来实现您的逻辑。 它应该接受一个字符串和您想要的逗号总数,并将该字符串限制为逗号数量。
下面是一个非常简单的 function 可以做到这一点。 它使用逗号分割字符串,确保结果数组的长度为 10,并从结果数组中返回一个连接字符串。
function ensureCommas(str, commas = 10) {
const commaArray = str.split(',');
const reduced = commaArray.slice(0, commas);
return reduced.join(',');
}
现在使用它。 这是一个非常简单的 App 组件,它将输入值保存在 state 中,并将此 state 值提供给输入,并且有一个 onChange 事件处理程序,它在每次按键时调用上述 ZC1C425268E68385D1AB5074C17A94F14
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>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.