React多表单收集数据 函数柯里化

最新推荐文章于 2024-08-05 16:46:39 发布
最新推荐文章于 2024-08-05 16:46:39 发布
阅读量248 收藏
点赞数 1
文章标签： react.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43368845/article/details/127610507
版权

React 处理多个表单收集数据 函数柯里化

1.常规收集表单数据

这是在一般情况下针对登录时收集表单的写法，但是如果是一个注册流程，可能不止用户名，密码两个输入项，显然如果是n个表单用这种方法的话，那么你需要写n监听函数，这根本没法玩。
在这里插入图片描述

2.使用函数柯里化

函数柯里化：函数柯里化是指将使用多个参数的函数转化成一系列使用一个参数的函数的技术, 它返回一个新的函数, 这个新函数去处理剩余的参数，通俗点说就是通过调用一个函数，该函数的返回值继续返回函数的形式。

这里我们针对多个表单的处理无非就是想办法把他集成为一个函数，然后不同表单用不同的类型做区分
这里可能会有个误区，直接在函数传递类型，结果发现其实你还没数值值的时候，函数已经调用了，问题出在这种写法其实你是将this.saveFormData的返回值作为onChange时间的回调，导致你即使输入框输入也没有效果
在这里插入图片描述在这里插入图片描述
正确演示：首先saveFormData拿到你传递的类型值之后你再return一个函数，那么return的这个函数将作为onChange事件回调，所以我们在这里再接收event事件对象就可以达到我们要的效果
在这里插入图片描述

阿Drew不会前端
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用React hooks处理复杂表单状态数据
ETHAN IN IT
09-09 4332
使用hooks替换this.setState() 自从React hooks*发布以来已经有一段时间了，我很喜欢这个特性。这个hooks把我勾上了！ Hooks允许我们创建更小，可组合，可重用，更易管理的React组件。 您可能正在使用Hooks的一个用例是：使用useState或useReducer管理表单状态。 让我们考虑一个场景，您必须管理具有多个输入的复杂表单状态，这些表单输入可以是几种...
react——受控组件form为多个输入时，简化方法的写法
牟童的博客
08-19 379
import React, { PureComponent } from 'react' export default class App extends PureComponent { constructor(){ super(); this.state={ username:"", password:"", valid:"" } } render() { .
React 收集表单数据
火星基地
03-30 312
1. 非受控组件 class Login extends React.Component { handleSubmit = event => { event.preventDefault(); //阻止表单提交 const { username, password } = this; alert(`你输入的用户名是：${username.value},你输入的密码是：${password.value}`); }; render() { return ( <form o
柯里化方法进行表单验证
默的博客
10-14 258
通过柯里化方法进行表达验证，简化验证步骤 之前验证步骤为 if(判断式(值1)){ 函数1 } if(判断式(值2)){ 函数2 } if(判断式(值3)){ 函数3 } 柯里化后 let demo = verificationData("值1","提示文案1","判断式1") ("值2","提示文案2","判断式1") ("值3","提示文案3","判断式1") 虽然不是标准柯里化函数，但是对于自己对柯里化了解有很大帮助 网上的柯里化函数给了一些经验，网址忘了，十分感
React-ref-form 玩法（form表单收集）
qq_52522995的博客
10-06 1076
实现功能：页面中显示一个输入框及一个提交按钮，当点击提交按钮button时，后台获取到输入框中所输入的内容。
react 表单获取多个input
weixin_30371875的博客
01-25 401
react 表单this.handleChange(key,e){　　[key]:e.target.value}submit=()=>{ 　　const {userName,age,status}=this.state;　　let parmas = {　　　　userName,　　　　age,　　　　status　　} }render(){ 　　const {userNam...
4、React 之 收集表单数据 与 组件生命周期（1）
所学所思
05-29 367
一、收集表单数据 1、效果 需求：定义一个包含表单的组件 输入用户名密码后，点击登录 提示输入信息 代码示例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="test"></div> </body&g
JSLea:大学JavaScript课程的资料库
03-16
柯里化则是将接受多个参数的函数转化为一系列接受单个参数的函数，以实现参数的部分求值。 事件驱动编程是JavaScript在网页交互中的关键。通过DOM（文档对象模型）操作，我们可以监听和处理用户的点击、输入等交互...
一些前端常见面试题和一些js奇巧淫技.zip
03-16
3. 函数柯里化（Currying）和部分应用（Partial Application）。 4. 高阶函数：map、filter、reduce等，以及它们在数组和对象上的应用。 5. 扩展运算符（Spread Syntax）和解构赋值（Destructuring）。 6. 类的静态...
面试题总结.docx
11-23
柯里化是一种将多参数函数转换为单参数函数链的技术。它允许开发者按需提供参数，从而提高代码的灵活性和复用性。 ### 五十六、Loader与Plugin的区别 Webpack中的Loader和Plugin分别用于文件转换和编译过程扩展。...
30-days-30-javascript-projects:我经历了30天的挑战，以建立30个原始javascript项目
05-11
9. **函数式编程**：利用函数作为一等公民的特性，采用纯函数、高阶函数、柯里化、函数组合等技术，提高代码的可读性和复用性。 10. **正则表达式**：在JavaScript中，正则表达式用于处理字符串，进行匹配、替换、...
jbclassroom:jb教室
03-12
3. **函数式编程**：JavaScript支持函数式编程风格，如高阶函数、闭包、柯里化、函数组合等。 4. **DOM操作**：学习如何通过JavaScript操作文档对象模型（DOM），以实现动态修改网页内容、添加事件监听等。 5. **...
React 项目中使用AntDesign框架时处理同一个页面使用多个Form表单的问题
热门推荐
前端小小白的爬坑之路
04-01 2万+
React 项目中同一个页面使用多个Form表单，如果直接在Render中使用多个Forn，在提交某一个表单时会同时触发其他表单的提交事件，因此可以使用函数式的方法return出Form组件，然后再Render中引用，从而使页面上的Form相互独立 代码如下： import React, { Component } from 'react'; import { Form, Button,...
react多页签页面缓存
小蚂蚁的世界
10-17 2704
demo分支代码：https://github.com/rodchen-king/ant-design-pro-v2/tree/tab-branch 背景 ant design pro v2的项目需要多页签显示页面而且还需要页面能够缓存下来。 多页面展示 不同数据会对应不同的详情页面 代码里面的路由跳转可以正常进行页面切换 页签可以关闭 主要设计： 这里主要是考虑多页面+缓存问题。 这里是借用了ant tabs标签的缓存作用。tabs的多页面只是显示和隐藏，组件本身还存...
react ant-design 在一个页面同时使用并提交多个表单
sinat_40628756的博客
04-05 7140
引言 我在使用react写web前端，React UI组件库是使用Ant Design。 我做的项目的一个需求是：在网页的一个页面上，同时使用多个表单，可以修改自定义表单的item(选择自己需要的 数据进行录入，并且可以删除不想要的item)，点击最顶层的按钮，可以同时提交多个表单。 效果 单一表单一个组件点击Done提交： Core Config组件，按钮在组件内，点击Done，会提交本组件内的表单数据。 多个表单同时使用： 如上图所示，一个页面有多个表单（Custom Config、ta
React中操纵和监听或同步Form表单中的数据（如Input中的值）两种方法
qq_37967853的博客
02-10 2689
React中操纵和监听或同步Form表单中的数据（如Input中的值）两种方法
react中收集表单数据
weixin_58073806的博客
02-28 301
react中收集表单数据
在react antd中动态生成多个 form表单组，包括一个动态添加/删除表单项的功能和一个提交表单的功能
weixin_38791717的博客
04-12 4637
方法，动态添加一个新的表单项。当用户提交表单时，将会调用。属性来指定占位文本。在每个表单项的最后，我们使用。组件来实现删除表单项的功能。在表单的最后，我们使用。方法，打印所有表单项的内容。在输入框中，我们使用。组件来实现提交表单的功能。方法循环渲染每个表单项，并使用。组件来动态生成多个表单项。属性指定表单项的名称，使用。在这个示例中，我们首先使用。组件包裹每个表单项。
React 知识点（一）
最新发布
措手不及ya的博客
08-05 599
React 使用，三、创建元素练习，JSX 使用，JSX 嵌入表达式，JSX条件渲染方式，JSX 列表渲染，JSX样式-style 操作，JSX样式-className 方式
提升前端面试技巧：96道核心问题解析与函数柯里化详解
6. **函数柯里化**：这是函数式编程中的一个重要概念，涉及将接受多个参数的函数转换为一系列只接受一个参数的函数。通过柯里化，可以减少重复代码，提高代码复用性和可读性。理解柯里化的关键是认识到它是如何通过...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值