您现在的位置是:首页 > Javascript
当前栏目
React入门五:事件处理
2023-02-25 18:16:23 时间
这是我参与8月更文挑战的第四天 活动详情查看:8月更文挑战
1. 事件绑定
- React事件绑定语法与DOM事件语法相似
- 如法:on+事件名称 = {事件处理程序} 如:onClick={()=>{ }}
- 注意:事件采用了驼峰命名法:比如:onMouseEnter、onFocus
类组件的绑定事件
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component{
handelClick(){
console.log("单击事件出发了")
}
render(){
return(
<button onClick={()=>{this.handelClick()}}>点击</button>
)}
}
ReactDOM.render(<App/>,document.getElementById('root'))
函数组件的绑定事件
function App(){
function handleClick(){
console.log('单击事件触发了')
}
return (
<button onClick={handleClick}></button>
)
}
2. 事件对象
- 可以通过事件处理程序的参数 获取到事件对象
- React中的事件对象叫做:合成事件(对象)
- 合成事件:兼容所有浏览器,无需担心跨浏览器兼容性问题
function App(){
function handleClick(e){
e.preventDefault()
console.log('a标签触发了')
}
return (
<a href="http://www.baidu.com" onClick={handleClick}>百度</a>
)
}
3. 有状态组件和无状态组件
- 无状态组件:函数组件
- 有状态组件:类组件 状态(state)既数据
- 函数组件没有自己的状态,只负责数据展示(静)
- 类组件有自己的状态,负责更新UI,让页面 “动” 起来 如:计数器从0到1
4. 组件中的state 和setState()
4.1 state的使用
- 状态既数据,是组件内部的私有数据,只能在组件内部使用
- state的值是对象,表示一个组件中可以有多个数据
- 通过this.state 获取状态
状态初始化 方法一:需要constructor初始化 ,super()也必须写
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component {
// 初始化状态
constructor(){
// 必须有 es6 class的一个要求
super()
this.state ={
count : 0
}
}
render(){
return(
<div>
{this.state.count}
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'))
方法二:简化写法 推荐使用
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
class App extends React.Component {
// 简化语法 初始化state
state ={
count : 10
}
render(){
return(
<div>
{this.state.count}
</div>
)
}
}
ReactDOM.render(<App/>,document.getElementById('root'))
4.2 setState()修改状态
- 状态是可变的
- 语法:this.setState({要修改的数据})
- 注意:不要直接修改state中的值,这是错误的!!
// 正确
this.setState({
count:this.state.count+1
})
// 错误
this.state.count += 1
- setState()作用:1.修改state 2.更新UI
计数器
state ={
count : 10,
test : 2 // 当对象有多个变量时 setState中只需写修改的那个变量
}
render(){
return(
<div>
{this.state.count}
<button onClick={()=>{
this.setState({
count:this.state.count + 1
})
}}>+1</button>
{this.state.test}
</div>
)
}
- 思想:数据驱动视图4.3 从JSX中抽离事件处理程序
- JSX中参杂过多的JS逻辑代码,会显得非常混乱
- 推荐:将逻辑抽离到单独的方法中,保证JSX结构清晰
class App extends React.Component {
state ={
count : 10,
test : 2
}
// 事件处理程序
onIncrement(){
// 找不到 this
console.log(this,"this")
this.setState({
count:this.state.count + 1
})
}
render(){
return(
<div>
{this.state.count}
<button onClick={this.onIncrement}>+1</button>
</div>
)
}
}
- 原因:事件处理程序中 this 的值为undefined
- 希望:this指向组件实例(render方法中的this既为组件实例)
5. 事件绑定this指向
5.1 箭头函数
- 利用箭头函数自身不绑定this的特点。由外部环境决定的
5.2 Function.prototype.bind()
- 利用ES5中的bind方法,将事件处理程序中的this与组件实例绑定到一起
class App extends React.Component {
constructor(){
super()
// 绑定 bind
this.onIncrement = this.onIncrement.bind(this)
}
state ={
count : 10,
test : 2
}
// 事件处理程序
onIncrement(){
// 找不到 this
console.log(this,"this")
this.setState({
count:this.state.count + 1
})
}
render(){
return(
<div>
{this.state.count}
<button onClick={this.onIncrement}>+1</button>
</div>
)
}
}
5.3 class的实例方法 (推荐使用)
- 利用箭头函数形式的class实例方法
- 注意:该语法是实验性的语法,但是,由于Babel的存在可以直接使用
既将onIncrement 函数 改成箭头函数
// 事件处理程序
onIncrement = ()=>{
this.setState({
count:this.state.count + 1
})
}
6. 表单处理
6.1 受控组件
- HTML中的表单元素是可输入的,也就是有自己的可变状态
- 而,React中的可变状态通常保存在state中,并且只能通过setState()方法来修改
- React将state与表单元素值value绑定到一起,由state的值来控制表单元素的值
- 受控组件:其值受到React控制的表单元素
<input type="text" value={this.state.txt}/>
步骤: 1.在state中添加一个状态,作为表单元素的value的值(控制表单元素值的由来) 2.给表单元素绑定change事件,将表单元素的值 设置为state的值(控制表单元素值的变化)
<input type="text" value={this.state.txt}
onChange={e=>this.setState({txt:e.target.value})}/>
文本框 改变值
class App extends React.Component {
state ={
count : 10,
test : 2
}
handleChange = e=>{
this.setState({
count:e.target.value
})
}
render(){
return(
<div>
<input value={this.state.count} onChange={this.handleChange}></input>
</div>
)
}
}
使用React插件,我们能看出来 state里的count值发生了变化。
示例: 复选框(操作checked)
<input type="checkbox" checked={this.state.check} onChange={this.handleChecked}>
- 多表单元素优化 问题:每个表单元素都有一个单独的事件处理程序太繁琐 优化:使用一个事件处理程序同事处理多个表单元素 步骤:
- 1.给表单元素添加name属性,名称与state相同
- 2.根据表单元素类型获取对应值
- 3.在change事件处理程序中通过[name]来修改对应的state
class App extends React.Component {
state ={
txt : 10,
check : 2
}
handleChange = e=>{
// 获取当前DOM对象
const target = e.target
// 根据类型获取值
const value = target.type === 'checkbox'
?target.checked
: target.value
// 获取name
const name = target.name
this.setState({
[name]:value
})
}
render(){
return(
<div>
<input name="txt" value={this.state.txt} onChange={this.handleChange}></input>
<input name="check" type="checkbox" checked={this.state.check} onChange={this.handleChange}></input>
</div>
)
}
}
6.2 非受控组件
- 说明:借助于ref,使用原生DOM方式来获取表单元素值
- ref的作用:获取Dom或组件
使用步骤: 1.调用React.createRef()方法创建一个ref对象
constructor(){
super()
this.txtRef = React.createRef()
}
2.将创建好的ref对象添加到文本框中
<input type="text" ref={this.txtRef}/>
3.通过ref对象获取文本框的值
console.log(this.txtRef.current.value)
class App extends React.Component {
constructor(){
super()
// 创建ref
this.txtRef = React.createRef()
}
getTxt = ()=>{
console.log(this.txtRef.current.value)
}
render(){
return(
<div>
<input name="txt" ref={this.txtRef}></input>
<button onClick={this.getTxt}>getTxt</button>
</div>
)
}
}
知道即可,因为其操作了DOM。违背了React的思想。
相关文章
- JS常用的几种设计模式
- pm2:在生产环境中运行 nodejs 应用
- 一些你需要掌握的 tsconfig.json 常用配置项
- 用 nodejs 实现 http 服务版本的 hello world
- 聊聊 JavaScript 的几种模块系统
- Node.js 是怎么找到模块的?
- Node.js 是如何做 GC (垃圾回收)的?
- React 源码:ReactElement 和 FiberNode 是什么?
- JS 当中的函数柯里化和高阶函数
- 数据提取-JsonPath
- Selenium与PhantomJS
- 数据提取-PyQuery
- package.json中script的生命周期
- JavaScript反爬之哈希算法
- 性能调优命令之jstat
- 性能调优命令之jstack
- 基于docker Jenkins搭建持续集成自动化测试环境,管理、配置、运行 Node 节点与 Slave 分布式运行
- selenium Webdriver自动化测试之执行JavaScript脚本
- Python3.x:Selenium+PhantomJS爬取带Ajax、Js的网页及获取JS返回值
- HTML基础之JS