当前位置: 首页 > news >正文

React 全栈体系(三)

第二章 React面向组件编程

四、组件三大核心属性3: refs与事件处理

1. 效果

  • 需求: 自定义组件, 功能说明如下:
    • 点击按钮, 提示第一个输入框中的值
    • 当第2个输入框失去焦点时, 提示这个输入框中的值

请添加图片描述
请添加图片描述

2. 理解

  • 组件内的标签可以定义ref属性来标识自己

3. 编码

3.1 字符串形式的ref

<input ref="input1"/>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_字符串形式的ref</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{//展示左侧输入框的数据showData = ()=>{const {input1} = this.refsalert(input1.value)}//展示右侧输入框的数据showData2 = ()=>{const {input2} = this.refsalert(input2.value)}render(){return(<div><input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/></div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

3.2 回调形式的ref

<input ref={(c)=>{this.input1 = c}}/>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_回调函数形式的ref</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{//展示左侧输入框的数据showData = ()=>{const {input1} = thisalert(input1.value)}//展示右侧输入框的数据showData2 = ()=>{const {input2} = thisalert(input2.value)}render(){return(<div><input ref={c => this.input1 = c } type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} ref={c => this.input2 = c } type="text" placeholder="失去焦点提示数据"/>&nbsp;</div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>3_回调ref中回调执行次数的问题</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{state = {isHot:false}showInfo = ()=>{const {input1} = thisalert(input1.value)}changeWeather = ()=>{//获取原来的状态const {isHot} = this.state//更新状态this.setState({isHot:!isHot})}saveInput = (c)=>{this.input1 = c;console.log('@',c);}render(){const {isHot} = this.statereturn(<div><h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}<input ref={this.saveInput} type="text"/><br/><br/><button onClick={this.showInfo}>点我提示输入的数据</button><button onClick={this.changeWeather}>点我切换天气</button></div>)}}//渲染组件到页面ReactDOM.render(<Demo/>,document.getElementById('test'))</script>
</body>
</html>

3.3 createRef创建ref容器

myRef = React.createRef() 
<input ref={this.myRef}/>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>4_createRef</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{/* React.createRef调用后可以返回一个容器,该容器可以存储被ref所标识的节点,该容器是“专人专用”的*/myRef = React.createRef()myRef2 = React.createRef()//展示左侧输入框的数据showData = ()=>{alert(this.myRef.current.value);}//展示右侧输入框的数据showData2 = ()=>{alert(this.myRef2.current.value);}render(){return(<div><input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;</div>)}}//渲染组件到页面ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

4. 事件处理

  • 通过onXxx属性指定事件处理函数(注意大小写)
    • React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
    • React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
  • 通过event.target得到发生事件的DOM元素对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>事件处理</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Demo extends React.Component{/* (1).通过onXxx属性指定事件处理函数(注意大小写)a.React使用的是自定义(合成)事件, 而不是使用的原生DOM事件 —————— 为了更好的兼容性b.React中的事件是通过事件委托方式处理的(委托给组件最外层的元素) ————————为了的高效(2).通过event.target得到发生事件的DOM元素对象 ——————————不要过度使用ref*///创建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 a="1" b="2"/>,document.getElementById('test'))</script>
</body>
</html>

5. 收集表单数据

5.1 效果

  • 需求: 定义一个包含表单的组件
  • 输入用户名密码后, 点击登录提示输入信息

在这里插入图片描述
请添加图片描述

5.2 理解

  • 包含表单的组件分类
    • 受控组件
    • 非受控组件

5.3 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>1_非受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = thisalert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名:<input ref={c => this.username = c} type="text" name="username"/>密码:<input ref={c => this.password = c} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_受控组件</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存用户名到状态中saveUsername = (event)=>{this.setState({username:event.target.value})}//保存密码到状态中savePassword = (event)=>{this.setState({password:event.target.value})}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是:${username},你输入的密码是:${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名:<input onChange={this.saveUsername} type="text" name="username"/>密码:<input onChange={this.savePassword} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>对象相关的知识</title></head><body><script type="text/javascript" >let a = 'name'let obj = {} // {name:'tom'}obj[a] = 'tom'console.log(obj);</script></body>
</html>
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>演示函数的柯里化</title></head><body><script type="text/javascript" >/* function sum(a,b,c){return a+b+c} */function sum(a){return(b)=>{return (c)=>{return a+b+c}}}const result = sum(1)(2)(3)console.log(result);</script></body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>高阶函数_函数柯里化</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//#region /* 高阶函数:如果一个函数符合下面2个规范中的任何一个,那该函数就是高阶函数。1.若A函数,接收的参数是一个函数,那么A就可以称之为高阶函数。2.若A函数,调用的返回值依然是一个函数,那么A就可以称之为高阶函数。常见的高阶函数有:Promise、setTimeout、arr.map()等等函数的柯里化:通过函数调用继续返回函数的方式,实现多次接收参数最后统一处理的函数编码形式。 function sum(a){return(b)=>{return (c)=>{return a+b+c}}}*///#endregion//创建组件class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存表单数据到状态中saveFormData = (dataType)=>{return (event)=>{this.setState({[dataType]:event.target.value})}}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是:${username},你输入的密码是:${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名:<input onChange={this.saveFormData('username')} type="text" name="username"/>密码:<input onChange={this.saveFormData('password')} type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>2_不用函数柯里化的实现</title>
</head>
<body><!-- 准备好一个“容器” --><div id="test"></div><!-- 引入react核心库 --><script type="text/javascript" src="../js/react.development.js"></script><!-- 引入react-dom,用于支持react操作DOM --><script type="text/javascript" src="../js/react-dom.development.js"></script><!-- 引入babel,用于将jsx转为js --><script type="text/javascript" src="../js/babel.min.js"></script><script type="text/babel">//创建组件class Login extends React.Component{//初始化状态state = {username:'', //用户名password:'' //密码}//保存表单数据到状态中saveFormData = (dataType,event)=>{this.setState({[dataType]:event.target.value})}//表单提交的回调handleSubmit = (event)=>{event.preventDefault() //阻止表单提交const {username,password} = this.statealert(`你输入的用户名是:${username},你输入的密码是:${password}`)}render(){return(<form onSubmit={this.handleSubmit}>用户名:<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/>密码:<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/><button>登录</button></form>)}}//渲染组件ReactDOM.render(<Login/>,document.getElementById('test'))</script>
</body>
</html>
http://www.lryc.cn/news/139346.html

相关文章:

  • 腾讯云下一代CDN -- EdgeOne加速MinIO对象存储
  • GitLab-CI 指南
  • MyBatis的核心技术掌握,简单易懂(上)
  • Redisson自定义序列化
  • MongoDB Long 类型 shell 查询
  • 回归预测 | MATLAB实现GA-APSO-IBP改进遗传-粒子群算法优化双层BP神经网络多输入单输出回归预测
  • Spring cache整合Redis使用介绍
  • Metasploit提权
  • TypeScript三种特殊类型
  • 如何使用CSS实现一个响应式轮播图?
  • 数据生成 | MATLAB实现MCMC马尔科夫蒙特卡洛模拟的数据生成
  • 【从零开始的rust web开发之路 二】axum中间件和共享状态使用
  • Vue操作时间
  • 数据库——Redis 常见数据结构以及使用场景分析
  • 数学建模-规划工具箱yalmip
  • [SQL挖掘机] - 窗口函数 - 计算移动平均
  • 域名和hostname
  • echarts 甘特图一组显示多组数据
  • 1139. 最大的以 1 为边界的正方形;2087. 网格图中机器人回家的最小代价;1145. 二叉树着色游戏
  • css滚动条的使用
  • 优化Python代理爬虫的应用
  • [C++] STL_vector使用与常用接口的模拟实现
  • 【LeetCode】167. 两数之和 II - 输入有序数组 - 双指针
  • YOLOV1
  • 美团增量数仓建设新进展
  • ​LeetCode解法汇总2337. 移动片段得到字符串
  • Fpass与Fstop
  • Java快速入门体验
  • 父组件传给子组件的数据是异步的,为什么会导致子组件比父组件先执行?
  • 泛型编程 学习笔记