Sé que es una mala práctica usar la función de flecha en línea en el componente de reacción.
Pero, ¿qué debo hacer cuando mi función tiene argumentos?
por ejemplo, en CustomInput
tengo una función para manejar el estado de enfoque y tiene un argumento. Lo uso en onBlur y onFocus y le paso el parámetro.
const CustomInput = () => { const [focused, setFocused] = useState(false); const handleFocus = (isFocus) => { /** * Some Conditions to check */ setFocused(isFocus); }; return ( <input onFocus={() => handleFocus(true)} onBlur={() => handleFocus(false)} /> ); };
Realmente depende de los estándares y convenciones que utilice su empresa/proyecto. A veces, las funciones de flecha en línea están permitidas, otras veces es una regla estricta definir una función, en cuyo caso generalmente usa una plantilla handleEvent
.
En el caso de una regla estricta contra las declaraciones de funciones en línea, tiene varias soluciones:
handleFocus
y luego cree funciones handleFocus
y handleBlur
que llamen a esa función.handleFocus
y handleBlur
, cada uno con una acción diferente. (En mi opinión, no es la mejor solución para un problema de tan pequeña escala)El foco de entrada será verdadero o falso. Simplemente puede pasar la función del controlador a los oyentes, y como sabe que siempre habrá solo dos estados, simplemente puede actualizar el estado con la inversión del estado booleano actual.
Si hay otros argumentos que cree que necesitará pasar, tiendo a adjuntar los datos a los atributos de datos en el elemento y luego los desestructura desde el conjunto de datos en el controlador.
const { useEffect, useState } = React; function Example() { const [focus, setFocus] = useState(false); function handleFocus(e) { const { text } = e.target.dataset; console.log(text); setFocus(!focus); } useEffect(() => { console.log(`Focused? ${focus}`); }, [focus]); return ( <input data-text="This is an example" onFocus={handleFocus} onBlur={handleFocus} /> ); }; // Render it ReactDOM.render( <Example />, document.getElementById("react") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>
No sé si entendí bien tu pregunta, pero esta es mi opinión:
Se trata solo de cómo pasar parámetros y aún así hacer que los controladores funcionen al devolver otra función
const CustomInput = () => { const [focused, setFocused] = useState(false); const handleFocus = (isFocus) => () => { /** * Some Conditions to check */ setFocused(isFocus); }; return ( <input onFocus={handleFocus(true)} onBlur={handleFocus(false)} /> ); };
En cuanto a las optimizaciones:
Si su componente se vuelve a renderizar, su función se "recreará" de cualquier manera. Ahí debe decidir si la optimización es realmente necesaria (sin optimizaciones prematuras) y si la necesita tanto, se logra de otras maneras:
etc...
Puedes jugar con un ejemplo aquí: https://codesandbox.io/s/friendly-greider-oph1f?file=/src/App.tsx