Necesita una entrada personalizada que lo limite a 10 comas.
Cuando es 10, debería ser posible modificarlo.
Actualmente, el evento de entrada funciona más rápido, por lo que se agregan comas adicionales para que no se pueda editar.
mi código
// 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 =''; } };Puede hacer esto de varias maneras, pero aquí hay una solución simple. La parte importante aquí es asegurarse de configurar su entrada en una entrada controlada, donde proporciona el valor de reaccionar.
Necesitamos una función que implemente su lógica. Debe incluir una cadena y el número total de comas que desee, y limitar esa cadena a la cantidad de comas.
A continuación se muestra una función muy simple que hace esto. Divide la cadena usando comas, asegura que la matriz de resultados se mantenga en 10 de longitud y devuelve una cadena unida de la matriz resultante.
function ensureCommas(str, commas = 10) { const commaArray = str.split(','); const reduced = commaArray.slice(0, commas); return reduced.join(','); }Ahora a usarlo. Aquí hay un componente de aplicación muy simple que mantiene el valor de entrada en estado y proporciona este valor de estado a la entrada, y tiene un controlador de eventos onChange que llama a la función anterior en cada pulsación de tecla
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> ); }Elimine la función handleKeyPress de las propiedades de entrada y actualice el objeto relationCallbackFunction .
const relationCallbackFunction = { handleOnChangeInput: (e) => { let value = e.target.value; const currentStr = value.split(","); if (currentStr.length <= 10) { setRelationSearch(value); } } };