No React, currying é uma tecnologia de alto nível sobre funções. Refere-se à forma de codificação de função que recebe vários parâmetros e finalmente os processa uniformemente, continuando a retornar funções. obtenha facilmente dados de controle de formulário ao processar formulários por meio de currying.
O ambiente operacional deste tutorial: sistema Windows 10, react versão 17.0.1, computador Dell G3.
Curry de funções:
Ao continuar retornando funções por meio de chamadas de função, é realizada uma forma de codificação de função que aceita parâmetros várias vezes e finalmente os processa uniformemente.
Extensões:
Função de ordem superior: se uma função atende a uma das duas especificações a seguir, a função é uma função de ordem superior
1. Se o parâmetro que uma função aceita for uma função, então a pode ser chamada de função de ordem superior
2. Se o valor de retorno da função a ainda for uma função, então a poderá ser chamada de função de ordem superior.
3. Funções comuns de ordem superior incluem: promessa, setTimeout, arr.map, etc.
Os exemplos são os seguintes;
No formulário, use componentes controlados para vincular os dados de estado para exibir os dados do formulário ao clicar:
importar React, {Component} de 'react';exportar classe padrão Form estende Componente{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //Evitar envio de formulário const {userName, senha } = this.state; alert(`${userName}, ${password}`) } updateUserName = (event) => { this.setState({ userName: event.target.value, }) } updatePassword = (evento) => { this.setState({ senha: event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Nome de usuário:<input type="text" name = "userName" onChange={this.updateUserName}/> Senha: <input type="password" name="password" onChange={this.updatePassword}/> <button>Login</button> </form> ) } }Pode-se ver que este método é mais complicado quando há muitos itens de formulário, e a função currying pode ser usada para otimizar:
importar React, {Component} de 'react';exportar classe padrão Form estende Componente{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //Evitar envio de formulário const {userName, senha } = this.state; alert(`${userName}, ${password}`) } updateFormData = (chave) => { return (evento) => { this.setState({ [chave]: evento .target.value, }) } } render() { return ( <form onSubmit={this.submitForm}> Nome de usuário:<input type="text" name="userName" onChange={this.updateFormData('userName' ) }/> Senha: <input type="password" name="password" onChange={this.updateFormData('password')}/> <button>Login</button> </form> ) }}O valor de retorno de this.updateFormData() é uma função de retorno de chamada, vinculada ao evento onChange, e o parâmetro é event. Dessa forma, o tipo pode ser passado quando a primeira chamada for feita e o valor pode ser passado quando o evento change for acionado.
Implementação sem currying de função
Vincular diretamente o evento onChange como um retorno de chamada permite passar parâmetros de tipo e valor ao mesmo tempo.
importar React, {Component} de 'react';exportar classe padrão Form estende Componente{ state = { userName: '', password: '' } submitForm = (event) => { event.preventDefault() //Evitar envio de formulário const {userName, senha } = this.state; alert(`${userName}, ${password}`) } updateFormData = (chave, evento) => { this.setState({ [chave]: event.target.value, }) } render() { return ( <form onSubmit={this.submitForm}> Nome de usuário:<input type="text" name="userName" onChange={(event) => this.updateFormData('userName', evento )}/> Senha: <input type="password" name="password" onChange={(event) => this.updateFormData('password', event)}/> <button>Login</button> </ formulário > ) }}