En React, curry es una tecnología de alto nivel sobre funciones. Se refiere a la forma de codificación de funciones que recibe múltiples parámetros y finalmente los procesa de manera uniforme al continuar devolviendo funciones. Curry no llama a la función, sino que simplemente convierte funciones. Obtenga fácilmente datos de control de formularios al procesar formularios mediante curry.
El entorno operativo de este tutorial: sistema Windows 10, versión de reacción 17.0.1, computadora Dell G3.
Curry de funciones:
Al continuar devolviendo funciones a través de llamadas a funciones, se logra una forma de codificación de funciones que acepta parámetros varias veces y finalmente los procesa de manera uniforme.
Extensiones:
Función de orden superior: si una función cumple con una de las dos especificaciones siguientes, la función es una función de orden superior
1. Si el parámetro que acepta una función es una función, entonces se puede llamar función de orden superior.
2. Si el valor de retorno de la función a sigue siendo una función, entonces a puede denominarse función de orden superior.
3. Las funciones comunes de orden superior incluyen: promesa, setTimeout, arr.map, etc.
Los ejemplos son los siguientes;
En el formulario, utilice componentes controlados para vincular los datos de estado para mostrar los datos del formulario al hacer clic:
importar React, {Componente} de 'react'; exportar clase predeterminada El formulario extiende Componente { estado = {nombre de usuario: '', contraseña: '' } enviarForm = (evento) => { evento.preventDefault() //Evitar el envío del formulario constante {nombre de usuario, contraseña } = this.state; alert(`${nombre de usuario}, ${contraseña}`) } updateUserName = (evento) => { this.setState({ nombre de usuario: event.target.value, }) } updatePassword = (evento) => { this.setState({ contraseña: event.target.value, }) } render() { return ( <formulario onSubmit={this.submitForm}> Nombre de usuario:<input type="text" nombre = "userName" onChange={this.updateUserName}/> Contraseña: <input type="password" name="contraseña" onChange={this.updatePassword}/> <button>Iniciar sesión</button> </form> ) } }Se puede ver que este método es más engorroso cuando hay muchos elementos de formulario y se puede utilizar el curry de funciones para optimizar:
importar React, {Componente} de 'react'; exportar clase predeterminada El formulario extiende Componente { estado = {nombre de usuario: '', contraseña: '' } enviarForm = (evento) => { evento.preventDefault() //Evitar el envío del formulario constante {nombre de usuario, contraseña } = this.state; alerta(`${nombre de usuario}, ${contraseña}`) } updateFormData = (clave) => { return (evento) => { this.setState({ [clave]: evento .target.value, }) } } render() { return ( <form onSubmit={this.submitForm}> Nombre de usuario:<input type="text" name="userName" onChange={this.updateFormData('userName') }/> Contraseña: <input type="contraseña" nombre="contraseña" onChange={this.updateFormData('contraseña')}/> <button>Iniciar sesión</button> </form> ) }}El valor de retorno de this.updateFormData() es una función de devolución de llamada, vinculada al evento onChange y el parámetro es el evento. De esta manera, el tipo se puede pasar cuando se realiza la primera llamada y el valor se puede pasar cuando se activa el evento de cambio.
Implementación sin función curry.
Vincular directamente el evento onChange como una devolución de llamada le permite pasar parámetros de tipo y valor al mismo tiempo.
importar React, {Componente} de 'react'; exportar clase predeterminada El formulario extiende Componente { estado = {nombre de usuario: '', contraseña: '' } enviarForm = (evento) => { evento.preventDefault() //Evitar el envío del formulario constante {nombre de usuario, contraseña } = this.state; alerta(`${nombre de usuario}, ${contraseña}`) } updateFormData = (clave, evento) => { this.setState({ [clave]: evento.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Nombre de usuario:<input type="text" name="userName" onChange={(event) => this.updateFormData('userName', evento )}/> Contraseña: <input type="contraseña" nombre="contraseña" onChange={(evento) => this.updateFormData('contraseña', evento)}/> <botón>Iniciar sesión</botón> </ formulario > ) }}