Tengo un campo de entrada en el que, si ingreso un valor decimal, quiero redondearlo al siguiente número más alto, pero el problema es que cada vez que escribo un punto ("."), se activa onChanage, lo redondea y luego actualiza el valor, así que básicamente no puedo escribir nada después del punto ("."). No puedo usar onBlur aquí, ¿alguien puede decirme qué puedo hacer?
import React, { useState, ChangeEvent } from 'react'; import { TextInputHelperCurrency } from '@honeycomb-npm/honeycomb-react'; export type LoanAmountProps = { label: string; errorMessage: string; defaultLoanAmount: string; minLoanAmount: string; maxLoanAmount: string; }; const LoanAmount: React.VFC = () => { const [enteredLoanAmount, setEnteredLoanAmount] = useState<string>('10000'); const handleAmountChange = (value: string) => { const roundedUpValue = Math.ceil(Number(value)); setEnteredLoanAmount(String(roundedUpValue)); }; return ( <div className="loan-amount"> <TextInputHelperCurrency data-testid="textInputHelperCurrency" id="loanAmount" value={enteredLoanAmount} onChange={handleAmountChange} /> </div> ); }; export default LoanAmount;No he trabajado en ReactTS , pero responderé la solución en ReactJS . Siéntase libre de editar la solución o sugerir cambios para TS.
En primer lugar, cree un useRef que se pasará en TextInputHelperCurrency como propiedad de innerRef . A continuación, en el gancho useEffect , verifique si el gancho useRef creado anteriormente se ha cargado y si hay un clic, y el gancho useRef no contiene el nodo de evento de destino, luego redondee el valor.
En el componente TextInputHelperCurrency , acepte la innerRef como accesorio y adjunte la innerRef como ref a la etiqueta principal de la declaración de return . Aquí está el código:
const LoanAmount: React.VFC = () => { const [enteredLoanAmount, setEnteredLoanAmount] = useState<string>('10000'); const textInputRef = useRef(null); useEffect(() => { const handleOutsideClickEvent = (event) => { if ( textInputRef.current && !textInputRef.current.contains(event.target) ) { const roundedUpValue = Math.ceil(Number(textInputRef.current.value)); setEnteredLoanAmount(String(roundedUpValue)); } }; document.addEventListener('click', handleOutsideClickEvent); return () => document.removeEventListener('click', handleOutsideClickEvent); }, [textInputRef]); return ( <div className='loan-amount'> <TextInputHelperCurrency data-testid='textInputHelperCurrency' id='loanAmount' value={enteredLoanAmount} innerRef={textInputRef} /> </div> ); }; Dentro del componente TextInputHelperCurrency ,
const TextInputHelperCurrency = ({innerRef}) => { // some code return ( <div ref={innerRef}> {/* some more code */} </div> ) };