Tengo una situación en la que quiero agregar una clase llamada shrink al texto de la etiqueta a continuación (Nombre para mostrar) cuando hago clic o escribo en el cuadro de entrada. Mi código está a continuación:
const FormInput = ({ label, ...otherProps} ) => { let labelClassName = 'formInput-label'; const addLabelClassName = () => { labelClassName = `${labelClassName} shrink`; console.log(labelClassName, 'labelClassName inside') } console.log(labelClassName, 'labelClassName outside') return ( <div className="group"> {label && <label className={labelClassName} >{label}</label> } <input onFocus={addLabelClassName } onChange={addLabelClassName } className="formInput" {...otherProps} /> </div> ) };Mi pregunta:
¿Por qué cuando enfoco/escribo, al principio, React genera los nombres de clase correctos para labelClassName inside como formInput-label shrink , pero inmediatamente lo vuelve a cambiar a formInput-label en la posición labelClassName outside ? ¿Cómo arreglaría esto?
También intenté cambiar el código para usar el enfoque UseState como se muestra a continuación:
const FormInput = ({ label, ...otherProps} ) => { const [interaction, setInteraction] = useState(''); let labelClassName = 'formInput-label'; const onInteracting = () => { setInteraction('interacting') } if(interaction === 'interacting') { labelClassName = `${labelClassName} shrink`; } return ( <div className="group"> {label && <label className={labelClassName} >{label}</label> } <input onFocus={onInteracting} onChange={onInteracting} className="formInput" {...otherProps} /> </div> ) }; Y esto agregará el shrink de clase correcto a labelClassName , pero no puedo eliminarlo cuando hago clic fuera de la entrada/formulario. ¿Cómo puedo arreglar esto?
¡Muchas gracias!
El segundo enfoque es una mejor manera porque con el cambio de estado activará la renderización del componente (el primer enfoque nunca volverá a renderizar el componente).
En el segundo enfoque, puede aprovechar el evento onBlur y crear un controlador que establecerá el estado en el valor predeterminado. Algo como esto. No necesita onChange para setIntercation
... const handleBlur = () => { setInteraction(""); }; ... y luego en la entrada, debe configurar onBlur prop. onChange no debería hacer lo mismo que ya hace onFocus .
.... <input onFocus={onInteracting} onBlur={handleBlur} className="formInput" {...otherProps} /> ....