【react】实现数据双向绑定之不用柯里化的方式

2023-10-26

直接给onChange事件绑定一个箭头函数,这个箭头函数的参数就是event,在箭头函数内再调用saveFormData方法,saveFormData方法里面this.setState({ [dataType]: value })

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据双向绑定不用柯里化的实现</title>
</head>
<body>
  <div id="test"></div>

  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script src="https://cdn.staticfile.org/prop-types/15.6.1/prop-types.js"></script>

  <script type="text/babel">
    class Demo extends React.Component {
      state = {
        username: '',
        password: ''
      }
      handleSubmit = (event) => {
        event.preventDefault()
      }
       
      saveFormData = (dataType, value) => {
        this.setState = {
          [dataType]: value
        }
        console.log(dataType, value)
      }
      render() {
        return (
          <form onSubmit={ this.handleSubmit }>
            用户名:<input type="text" name="username" onChange={ event => this.saveFormData('username', event.target.value) } />
            密码:<input type="paasword" name="paasword" onChange={ event => this.saveFormData('paasword', event.target.value) } />
            <button>登录</button>
          </form>
        )
      }
    }
    ReactDOM.render(<Demo />, document.getElementById('test'))
  </script>
</body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【react】实现数据双向绑定之不用柯里化的方式 的相关文章

  • 如何在 TypeScript 中使用时刻持续时间格式?

    我在 TypeScript Ionic2 Angular2 项目中使用 moment js 继从这个帖子 https stackoverflow com questions 43042337 how to format decimal ho
  • 如何调整 jQuery UI 手风琴的高度?

    在我的用户界面中 我有一个像这样的手风琴设置 div h3 Section 1 h3 div content div More sections div 手风琴在刚形成时工作正常 并且似乎可以很好地适应每个部分内的内容 但是 如果我在 ac
  • 我的 React 项目中 Firestore 数据库的读取次数非常多

    我正在使用 React 和 firebase firestore 制作一个简单的 CRUD 应用程序 我目前有一组 产品 有四条记录 主页循环显示产品 import React useEffect useState from react i
  • 如何从后端路由内的第三方API获取?

    尝试从第三方 url 获取 JSON 数据并将其带到我的后端路由 首先 我将查询字符串输入到应用程序的 url 中 并将它们存储到变量中 并在第三方 url 中使用它 尽管来自应用程序 url 的查询字符串已正确存储 但第二个和第三个查询字
  • 将正则表达式扩展到负数

    我想将以下正则表达式扩展到负数 this value this value replace 0 9 g 我尝试添加减号 执行类似 0 9 g 的操作 但这允许在数字的任何位置输入减号 我只想允许数字开头出现一次减号 随后出现的减号应被忽略
  • 如何解决大内容的角度性能问题

    我熟悉 Angular 的摘要周期以及它如何影响长列表和大模型值的性能 我只是好奇您是否有专门针对我的情况的问题的解决方法 我正在构建一个应用程序 它可能需要也可能不需要用户输入大文本 例如错误日志textarea 但由于与 2 路数据绑定
  • HTML5 下载属性不适用于 Mozilla [重复]

    这个问题在这里已经有答案了 a class download btn href https example com test pdf target blank Download a 我上面有简单的下载链接html5代码 它在 mozilla
  • jQuery 中的按钮点击

    我是 jQuery 新手 我想使用按钮单击事件来引发警报框 这是我的代码 但它似乎不起作用
  • 无法读取 null 和其他 null 变量的属性“appendChild”

    在开始之前 我想让您知道我对 Web 开发还很陌生 我还想保留这个 100 javascript 所以现在没有 jquery 或其他语言 以下代码源自该视频 https www youtube com watch v esa5hJegRfI
  • 如何显示由 setTimeout/setInterval 生成的每个正在运行的线程的列表

    我想通过纯 javascript 或浏览器中的任何类型的控制台或其他方式来完成此操作 是否可以 Thanks 进一步说明 我想调试一个执行动画的库 我想知道如果有多个对象被动画化 是否会创建多个计时器 注意setTimeout 不会产生新线
  • Javascript 递增运算求值顺序

    我知道后缀 前缀递增 递减运算符的作用 而在 javascript 中 这似乎没有什么不同 虽然我可以很容易地猜出这一行的结果 var foo 10 console log foo foo foo foo foo output 10 11
  • 使用嵌套对象进行 Hapi/Joi 验证

    我对我的其中一条路线进行了以下验证 payload keywordGroups Joi array items Joi object keys language Joi string required containsAny Joi arr
  • 重新渲染次数过多。 React 限制渲染数量以防止无限循环。下一个js错误

    有人可以解决这个问题吗 如果我删除 about 和 is 之前的 它不会抛出错误 smh import Navbar from components Navbar import Footer from components Footer i
  • 使用 React 前端的 Django Google 登录

    这个问题可能非常简单 但我已经搜索了一段时间 但还没有找到确切的解决方案 我正在尝试使用 React 作为前端 使用 Django 作为后端来实现 Google Login 我到底该怎么做呢 我见过一些解决方案 其中将令牌发送到后端 然后后
  • 使用 jquery deferreds 处理可变数量的 ajax 请求

    当我有可变数量的 ajax 请求时 如何使用 deferreds 调用它们 我猜 qty of gets 3 function getHTML productID qty of gets var dfd Deferred i 0 c 0 t
  • 更改卡片布局中的活动项目。扩展JS

    我有一个使用卡片布局的面板 如下所示 var cardpanel new Ext Panel id cardPanel title Card Layout region center layout card activeItem 0 aut
  • Highcharts 在导出时添加图像

    我使用具有导出功能的 Highcharts 根据我的理解 将图像添加到图表中 我可以使用渲染器 该渲染器工作正常 但我不希望图像 徽标 出现在应用程序中的图表上 我希望它出现仅在出口时 我该如何做到这一点 你应该使用图表选项 http ap
  • screen.availHeight 和 window.height() 之间的区别

    我正在我的浏览器 Firefox 上执行以下 Javascript console debug 屏幕高度 屏幕可用高度 输出770 console debug 窗口高度 窗口 height 输出210 我也在使用 jQuery 两者有什么区
  • 获取具有最高属性值的对象的最佳方式

    我有以下学生对象的多维数组 var students name Jack age NYN attempts 3 wrong 2 name Phil age NNNY attempts 4 wrong 3 name Tom age attem
  • 删除 JavaScript 中的不间断空格

    我无法从字符串中删除空格 首先我要转换div to text 删除标签 有效 然后我尝试删除 nbsp 字符串的一部分 但它不起作用 知道我做错了什么 newStr myDiv text newStr newStr replace nbsp

随机推荐

  • 数据结构与算法:哈夫曼树与哈夫曼编码

    1 举例引入 我们先以成绩评级举例分析 一步一步的认识Haffman树和Haffman编码 分数 0 59 60 69 70 79 80 89 90 100 成绩 不及格 及格 中等 良好 优秀 所占比例 5 15 40 30 10 如果是
  • 安装系统键盘鼠标无法使用

    安装Windows原版系统 发现在BIOS中可以正常使用键盘鼠标 但是进入U盘 开始安装系统的时候键盘鼠标全部失灵 原因应该是U盘中的系统不能识别鼠标 这个大致是微软和Intel芯片之间兼容的问题 我也讲不清 直接上解决方案 我不是创造者
  • 【多人姿态估计】Alphapose_yolov8复现

    1 环境 参考此处安装docker nvidia docker https blog csdn net qq 35975447 article details 113248132 然后导入docker image https blog cs
  • 2021Java大厂面试经验分享,100%好评!

    Spring Security观后感 手绘思维脑 供参考 手绘的思维导图 是我自己根据自身的情况读完这套阿里出品的Spring Security王者晋级文档之后所绘的 相当于是一个知识的总结与梳理 我将其分为 核心组件 与 工作原理 认证流
  • 【从零开始学习C++

    目录 前言 委托构造函数 类内初始化 空指针 枚举类 总结 前言 C 的学习难度大 内容繁多 因此我们要及时掌握C 的各种特性 因此我们更新本篇文章 向大家介绍C 的新增特性 委托构造函数 委托构造函数是指一个类的构造函数调用另一个类的构造
  • 【云原生之k8s】k8s控制器

    文章目录 引言 Pod与控制器之间的关系 1 Deployment 无状态 2 SatefulSet 有状态 2 1 有状态与无状态的区别 2 2 常规service和无头服务区别 2 2 1 Service类型 2 2 2 headles
  • 未来会怎样?

    伴随Visual Studio 2008 的发布 NET 3 5也一起来了 J2EE风采依旧 Python风头正劲 未来会怎样 我们究竟要学多少新的东西才能不被日新月异的技术浪头打沉在海底 或许本不应该为了技术而技术 QQ不也很成功么 易趣
  • Docker镜像推送(push)到Docker Hub

    Docker镜像推送 push 到Docker Hub 1 Docker hub 注册账户 2 登录注册账户 随后输入账户名 密码 docker login 3 修改镜像名称 docker tag originName username o
  • n边形划分

    题目描述 已知存在n多边形 n为奇数 连接多边形所有对角线 能形成多少区域 输入描述 给定整数n 1 lt n lt 1e9 输出描述 输出区域数 对1e9 7取模 示例 输入5 输出11 include
  • 2018.09.18 atcoder Best Representation(kmp)

    传送门 思路简单不知为何调试了很久 显然要么分成n个 所有字符相同 要么分成1个 原字符串无循环节 要么分成两个 有长度至少为2的循环节 一开始以为可以直接hash搞定 后来wa了几次之后发现可以轻松举出反例于是弃了hash kmp大法好啊
  • 毕业设计 - 基于单片机的MP3设计与实现

    文章目录 1 简介 2 主要器件 3 实现效果 4 设计原理 核心算法 音频解码流程 5 部分实现代码 6 最后 1 简介 Hi 大家好 今天向大家介绍一个学长做的单片机项目 基于单片机的MP3设计与实现 大家可用于 课程设计 或 毕业设计
  • 软件工程技术--第四章 概要设计

    第四章 概要设计 4 1 软件设计概述 4 1 1 软件设计的概念与重要性 软件设计是软件工程的重要阶段 是一个将软件需求转换为软件表示的过程 软件设计的基本目标是用比较抽象概括的方式确定目标系统如何完成预定的任务 即确定系统的物理模型 解
  • EXCEL 数字统一转换成文本

    将excel中的数字统一转换成文本形式 即添加 1 点击数据 分列 2 分隔符号 下一步 3 选择文本识别符号 如 分号 4 选中文本 完成 转载于 https www cnblogs com vicdream p 4604012 html
  • 合宙 ESP32C3 使用micropython 驱动配套0.96寸 TFT ST7735 屏幕显示色块和文字

    合宙的esp32c3 开发板配套了0 96寸屏幕驱动板 可直接使用如下链接的代码 注意替换对应的pin脚和st7735 py文件 1 想显示色块参考如下链接 链接 合宙esp32c3 合宙air101LCD屏幕跑通microPython 2
  • hbase面试题(6)

    1 HBase来源于哪篇博文 C BigTable 2 下面对HBase的描述哪些是正确的 B C D B 是面向列的 C 是分布式的 D 是一种NoSQL数据库 3 HBase依靠 存储底层数据 A A HDFS B Hadoop C M
  • SAR目标检测数据集汇总

    SAR目标检测数据集汇总 文章目录 SAR目标检测数据集汇总 1 MSTAR 1996 2 OpenSARShip2 0 2017 3 SSDD SSDD 2020 4 AIR SARShip2 0 2019 5 SAR Ship Data
  • VScode调试php文件(详细且简单易操作)

    之前也不懂 看了网上好多帖子 按照它们步骤操作一遍之后 还是不行 头都大了 现在懂了 原来几步就搞定了 被它们搞得这么复杂 又是配置这个文件 又是配置那个文件 1 下载XAMPP Download XAMPP apachefriends o
  • Java程序员面试常问试题大全

    Java程序员面试常问试题大全 1 面向对象的特征有哪些方面 1 抽象 抽象就是忽略一个主题中与当前目标无关的那些方面 以便更充分地注意与当前目标有关的方面 抽象并不打算了解全部问题 而只是选择其中的一部分 暂时不用部分细节 抽象包括两个方
  • 详解 cryptogen 的内容和配置

    目录 1 cryptogen 模块命令说明 2 cryptogen 模块的配置文件 3 cryptogen 实例 创建测试配置文件 4 Fabric 证书文件的结构 cryptogen 模块主要用来生成组织结构和账号相关的文件 任何 Fab
  • 【react】实现数据双向绑定之不用柯里化的方式

    直接给onChange事件绑定一个箭头函数 这个箭头函数的参数就是event 在箭头函数内再调用saveFormData方法 saveFormData方法里面this setState dataType value