Tengo una entrada reutilizable construida sobre la entrada Antd.
Ahora tengo un recorte de apoyo que es un valor booleano.
Si trim es verdadero, recortamos los espacios en blanco iniciales y finales como se muestra a continuación.
export default function MyInput({ trim, onChange, ...props }) { const handleChange = (e) => { if (trim) { e.target.value = e.target.value.trim(); } onChange?.(e); }; return <Input onChange={handleChange} {...props} />; }Esto funciona completamente bien.
Código disponible aquí
Pero, ¿es un buen enfoque?
Si no, ¿cuál es la mejor alternativa para lograr esta funcionalidad?
Este no es un buen enfoque. anula el propósito de React trabajando con Virtual DOM . Evite manipular el DOM directamente cuando use React. Una buena solución será usar un state para almacenar la entrada y devolver el estado a la entrada usando la propiedad de value .
Revisa el código a continuación:
export default function MyInput({ trim, onChange, ...props }) { const [input, setInput] = React.useState(""); const handleChange = (e) => { if (trim) { setInput(e.target.value.trim()); } else { setInput(e.target.value); } onChange?.(e); }; return <Input onChange={handleChange} value={input} {...props} />; } Con este enfoque, está permitiendo que React administre la entrada por usted y puede leer la entrada en cualquier momento usando el estado. Es posible que desee pasar el estado de entrada a su props.onChange .