React06——React事件处理&受控组件&非受控组件&函数柯里化

最新推荐文章于 2024-07-18 11:16:25 发布
最新推荐文章于 2024-07-18 11:16:25 发布
阅读量135 收藏
点赞数
分类专栏： 前端 文章标签： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_37483148/article/details/114964451
版权

事件处理

  1. 通过onXxx属性指定事件处理函数(注意大小写)
    1. React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
    2. React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
  2. 通过event.target得到发生事件的DOM元素对象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <script type="text/babel">
    /*
    一。通过onXxx属性指定事件处理函数
        1）React使用的是自定义（合成）事件，而不是使用原生的DOM事件 ——为了更好的兼容
        2）React中的事件是通过事件委托的方式处理的（委托给组件最外层的元素）———为了更高效
    二。通过event.target得到发生事件的DOM元素对象——不要过度使用ref
    */
    class Demo extends React.Component{

       //创建ref容器
			myRef = React.createRef()
			myRef2 = React.createRef()

			//展示左侧输入框的数据
			showData = (event)=>{
				console.log(event.target);
				alert(this.myRef.current.value);
			}

			//展示右侧输入框的数据
			showData2 = (event)=>{
				alert(event.target.value);//绑定的事件源等于触发的事件源
			}

			render(){
				return(
					<div>
						<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
					</div>
				)
			}
		}
		//渲染组件到页面
    ReactDOM.render(<Demo/>,document.getElementById('test'))
    </script>
</body>
</html>

包含表单的组件分类

  1. 受控组件
  2. 非受控组件：现用现取
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <script type="text/babel">
    	//创建组件 非受控组件 现用现取
        class Login extends React.Component{
            handleSubmit=(event)=>{
              event.preventDefault();//阻止表单提交
              const {username,password}=this
              alert(`用户名是${username.value},密码是${password.value}`)
                
            }
         
            render(){
                return (
                    <form onSubmit={this.handleSubmit} >
                        用户名：<input ref={c=>this.username=c} name="username"type="text"/>
                        密码：<input ref={c=>this.password=c} name="password"type="password"/>
                        <button>登陆</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.querySelector('#test'))
    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <script type="text/babel">
    	//创建组件 受控组件 不是现用现取的
        class Login extends React.Component{
            //初始化状态
            state={username:'',password:''}
            saveUsername=(event)=>{
                // console.log(event.target.value);
                this.setState({username:event.target.value})
                
            }
            savePassword=(event)=>{
                // console.log(event.target.value);
                this.setState({password:event.target.value})


            }
            handleSubmit=(event)=>{
                event.preventDefault()
                const {username,password}=this.state
              alert(`用户名是${username},密码是${password}`)

            }
         
            render(){
                return (
                    <form onSubmit={this.handleSubmit} >
                        用户名：<input onChange={this.saveUsername} name="username"type="text"/>
                        密码：<input onChange={this.savePassword} name="password"type="password"/>
                        <button>登陆</button>
                    </form>
                )
            }
        }
        ReactDOM.render(<Login/>,document.querySelector('#test'))
    </script>
</body>
</html>

高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
                                    1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
                                    2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
                                    常见的高阶函数有：Promise、setTimeout、arr.map()等等

函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
                        function sum(a){
                            return(b)=>{
                                return (c)=>{
                                    return a+b+c
                                }
                            }
                        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <script type="text/babel">
    		/*
					高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
									1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
									2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
									常见的高阶函数有：Promise、setTimeout、arr.map()等等

					函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
						function sum(a){
							return(b)=>{
								return (c)=>{
									return a+b+c
								}
							}
						}
					*/
        class Login extends React.Component{
            //初始化状态
            state={username:'',password:''}
            // saveUsername=(event)=>{
            //     // console.log(event.target.value);
            //     this.setState({username:event.target.value})
                
            // }
            // savePassword=(event)=>{
            //     // console.log(event.target.value);
            //     this.setState({password:event.target.value})
            // }
            saveData=(dataType)=>{
                return (event)=>{
                    console.log(dataType);
                    
                    this.setState({[dataType]:event.target.value})//	obj[a] = 'tom'
                }
                
            }
            handleSubmit=(event)=>{
                event.preventDefault()
                const {username,password}=this.state
              alert(`用户名是${username},密码是${password}`)

            }
         
            render(){
                return (
                    <form onSubmit={this.handleSubmit} >
                        用户名：<input onChange={this.saveData('username')} name="username"type="text"/>
                        密码：<input onChange={this.saveData('password')} name="password"type="password"/>
                        <button>登陆</button>
                    </form>
                )
            }
        }
        // this.saveFormData('username')这叫把saveformdata的返回值赋作为onchange的回调  必须把一个函数作为onchange的回调，管你写不写小括号

        ReactDOM.render(<Login/>,document.querySelector('#test'))
    </script>
</body>
</html>

如果不用函数柯里化的实现方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
    <script type="text/babel">
    		/*
					高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。
									1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
									2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
									常见的高阶函数有：Promise、setTimeout、arr.map()等等

					函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
						function sum(a){
							return(b)=>{
								return (c)=>{
									return a+b+c
								}
							}
						}
					*/
        class Login extends React.Component{
            //初始化状态
            state={username:'',password:''}
            // saveUsername=(event)=>{
            //     // console.log(event.target.value);
            //     this.setState({username:event.target.value})
                
            // }
            // savePassword=(event)=>{
            //     // console.log(event.target.value);
            //     this.setState({password:event.target.value})
            // }
            saveData=(dataType,event)=>{

                    this.setState({[dataType]:event.target.value})//	obj[a] = 'tom'

            }
            handleSubmit=(event)=>{
                event.preventDefault()
                const {username,password}=this.state
              alert(`用户名是${username},密码是${password}`)

            }
         
            render(){
                return (
                    <form onSubmit={this.handleSubmit} >
                        用户名：<input onChange={event=>this.saveData('username',event)} name="username"type="text"/>
                        密码：<input onChange={event=>this.saveData('password',event)} name="password"type="password"/>
                        <button>登陆</button>
                    </form>
                )
            }
        }
    // this.saveFormData('username')这叫把saveformdata的返回值赋作为onchange的回调  必须把一个函数作为onchange的回调，管你写不写小括号

        ReactDOM.render(<Login/>,document.querySelector('#test'))
    </script>
</body>
</html>

 

I have a lemon
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
浅谈react受控组件与非受控组件(小结)
08-28
React 受控组件与非受控组件详解 React 中的受控组件和非受控组件是两种不同的表单组件类型，它们之间的区别在于是否可以由外部控制组件的值。本文将详细介绍受控组件和非受控组件的概念、特点和使用场景。 一、非...
浅谈React深度编程之受控组件与非受控组件
08-28
React 中的受控组件与非受控组件 React 中的组件可以分为受控组件和非受控组件两种。受控组件是指组件的值由状态（state）控制，而非受控组件的值则由用户输入控制。 受控组件是在 React 中一种特殊的组件，它的值...
React中的事件处理，受控组件，高阶函数和函数柯里化
yangaoyuan1999的博客
06-18 185
1.事件处理 1.React官网说我们要尽量不要过度使用ref 2.自身的事件，自身改变可以使用事件处理 3.通过onXxx属性执行事件处理函数(注意大小写) a.React使用的是自定义(合成)事件，而不是使用的原生DOM事件 b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)——为了高效 4.通过event.target的到发生事件的DOM元素对象——不要过度使用ref <!DOCTYPE html> <html lang="en"> <h
React-函数柯里化
TO_Web的博客
02-28 417
React函数柯里化 ps: 用于记录学习,持续更新 先来看段代码 class People extends React.Component { changeData = () => { // 下面这个renturn函数 是解决函数返回值是undefined的问题 return () => { } } render() { return ( <form> <input onChange={this.changeData}" />
从零开始学习React：react中事件处理与柯里化
Junerver的博客
05-23 418
从零开始学习React：了解当前React常用技术，编写第一个React组件 从零开始学习React：了解组件的三大属性 从零开始学习React：react中事件处理与柯里化 1. 事件处理 React 中元素也可接受、处理事件，但是在语法上有一点不同。 在React 中所有事件的命名采用的是小驼峰，而非原生 DOM 的纯小写，所有事件需要我们传入一个函数，而非字符串。 例如： const Button = () => { const handleClick = () => {
【react】---函数化编程的理解，柯里化函数及返柯里化函数的理解...
weixin_30590285的博客
09-22 216
虚拟DOM 与 js概念的理解 01.纯函数的理解: 02.柯里化函数 编写一个函数add(3)(4)(5)得出结果12//通过柯里化函数就可以实现 一个函数内，执行过程中，返回一个函数 真正明白闭包及柯里化函数 ...
react（21）——不使用函数柯里化功能实现表单验证
木子 旭的博客
01-31 111
1.代码 <body> <div id="test"></div> <script type="text/babel"> "use strict"; class Login extends React.Component { state = { username: "", password: "", }; saveFormData = (dataType,value)
React 组件中的事件处理、组件(受控、非受控)、函数柯里化
YuLong的博客
09-12 867
文章目录事件处理收集表单数据非受控组件受控组件函数柯里化 事件处理 在React中获取虚拟组件中的标签的值 使用组件的 refs属性 在虚拟组件的标签中定义事件，在事件中通过 箭头函数 获取标签的值 使用事件对象——event 事件处理： 通过onXxx属性指定事件处理函数(注意大小写) React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 ———为了更好的兼容性 React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————为了高效 通过event.targe
React 使用Hooks简化受控组件的状态绑定
10-17
主要介绍了React 使用Hooks简化受控组件的状态绑定，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React受控组件、非受控组件、高阶函数与柯里化
weixin_46628668的博客
05-29 147
紧接着上一篇介绍refs的案例React三大属性之props与refs简介，本文先进行一些优化，然后引入一些新的概念。优化的出发点是因为React官网说不要过多使用refs，因此能不用refs就不用refs。以第二个输入框为例，其事件onBlur的回调函数可以简写为： <input onBlur={event => console.log(event.target.value)} type="text" placeholder="失去焦点打印数据"/> 这里的onBlur的值一定要
React初识整理（三）--受控组件解决方法
weixin_30298497的博客
12-09 105
1. 受控组件：组件处于受控制状态，不可更改输入框内的值。 2. 什么情况下会让组件变成受控组件？ 　　- 文本框设置了value属性的时候 　　- 单选框或多选框设置了checked属性的时候。 3. 如何解决？ 　　- 使用state设置值 　　- 绑定onChange事件- 在事件处理方法中获取组件的值并更改state。 　　 4. input框受控解决举例：...
前端复习--18 3D动画？
小白的学习路
07-25 5882
1. 3D操作？ transform: rotateX() : 正值向上翻转 rotateY() : 正值向右翻转 translateZ() : 正值向前，负值向后 值不能超过景深，不然就比整个屏幕还要大了 scaleZ() : 立体元素的厚度 3d写法 scale3d() : 三个值 x y z translate3d() : 三个值 x y z rotate3d() : 四个值 0...
JavaScript18——触屏事件
小白的学习路
12-13 4038
1.1. 触屏事件 1.1.1 触屏事件概述 移动端浏览器兼容性较好，我们不需要考虑以前 JS 的兼容性问题，可以放心的使用原生 JS 书写效果， 但是移动端也有自己独特的地方。比如触屏事件 touch(也称触摸事件)，Android 和 IOS 都有。 touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指 (或触控笔)对屏幕或者触控板操作。 常⻅的触屏事件如下: 触屏touch事件 说明 touchstart 手指触摸到一个DOM元素时触
jQuery03——jQuery 事件
小白的学习路
12-18 1039
1.1. jQuery 事件注册 jQuery 为我们提供了方便的事件注册机制，是开发人员抑郁操作优缺点如下: 优点: 操作简单，且不用担心事件覆盖等问题。 缺点: 普通的事件注册不能做事件委托，且无法实现事件解绑，需要借助其他方法。 语法 1.2. jQuery 事件处理 因为普通注册事件方法的不足，jQuery又开发了多个处理方法，重点讲解如下: on(): 用于事件绑定，目前最好用的事件绑定方法 off(): 事件解绑 trigger() / triggerHandler(): 事件触发
elementUI在手机端使用遇到的问题总结
最新发布
小白的学习路
07-18 714
之前的博客有写过用vue2+elementUI封装手机端选择器picker组件，支持单选、多选、远程搜索多选，最终真机调试的时候发现有很多细节样式需要调整。此篇博客记录下我调试过程中遇到的问题和解决方法。
React09——使用脚手架编程
小白的学习路
03-22 526
使用create-react-app创建react应用 react脚手架 xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目 包含了所有需要的配置（语法检查、jsx编译、devServer…） 下载好了所有相关的依赖 可以直接运行一个简单效果 react提供了一个用于创建react项目的脚手架库: create-react-app 项目的整体技术架构为: react + webpack + es6 + eslint 使用脚手架开发的项目的特点: 模块化, 组件化,..
axios
小白的学习路
03-25 496
1. 第 1 章:axios 的理解和使用 1.1. axios 是什么? 前端最流行的 ajax 请求库 react/vue 官方都推荐使用 axios 发 ajax 请求 文档: https://github.com/axios/axios 1.2. axios 特点 基于 xhr + promise 的异步 ajax 请求库 浏览器端/node 端都可以使用 支持请求/响应拦截器 支持请求取消 请求/响应数据转换
React学习笔记：状态提升、受控/非受控组件与组件通信
总结来说，这份笔记涵盖了React中的状态管理、组件类型（受控/非受控）、跨组件的数据传递以及如何利用高阶组件来增强组件功能。深入理解并实践这些概念有助于提高开发React应用的效率和组件间的交互性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值