function CheckoutForm({ onSubmit }) { const [shippingName, setShippingName] = useState(""); function handleChange(func, e) { return function () { return func.call(null, e.target.value); }; } return ( <form> <div className="field"> <label htmlFor="shipping-username">이름</label> <input id="shipping-username" type="text" name="shipping-username" autoComplete="off" value={shippingName} // onChange={(e) => setShippingName(e.target.value)} <--- ORIGINAL METHOD onChange={handleChange(setShippingName(e.target.value), e)} <--- MY QUESTION /> </div> </form> ) }Mientras creaba un campo de entrada simple, tenía curiosidad si podía crear una función handleChange de orden superior y reutilizarla para otras entradas. Sé que hay una mejor manera de usar nombres de propiedad computados, pero solo por curiosidad.
El mensaje de error que recibo del código anterior es que e no está definido y estoy atascado aquí. Cualquier consejo es bienvenido.
Cuando define un controlador onChange como este:
onChange={handleChange(setShippingName(e.target.value), e)}
Está asignando el valor devuelto de esta llamada handleChange como el controlador . Por lo tanto, debe pasar sus propios valores a handleChange, porque no se llama durante el evento; e no se definirá en este punto. Es solo la función resultante la que recibirá e del evento.
Así que podrías redefinir handleChange con e como el argumento de la función interna, así:
function handleChange(func) { return function (e) { return func.call(null, e.target.value); }; } Y más abajo, puede omitir el paso de e (que de todos modos no estaría definido). Mejor hazlo así:
onChange={handleChange(setShippingName)}... sin embargo, creo que puede simplificar mucho todo simplemente definiendo su controlador en línea de esta manera:
onChange={(e) => setShippingName(e.target.value)}^^ esta es la forma en que todo el mundo lo hace.