前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >React入门五:事件处理

React入门五:事件处理

作者头像
用户4793865
发布2023-01-12 14:32:11
1.8K0
发布2023-01-12 14:32:11
举报
文章被收录于专栏:前端小菜鸡yym前端小菜鸡yym

这是我参与8月更文挑战的第四天 活动详情查看:8月更文挑战

1. 事件绑定

  • React事件绑定语法与DOM事件语法相似
  • 如法:on+事件名称 = {事件处理程序} 如:onClick={()=>{ }}
  • 注意:事件采用了驼峰命名法:比如:onMouseEnter、onFocus

类组件的绑定事件

代码语言:javascript
复制
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'))

函数组件的绑定事件

代码语言:javascript
复制
function App(){
  function handleClick(){
    console.log('单击事件触发了')
  }
  return (
    <button onClick={handleClick}></button>
  )
}

2. 事件对象

  • 可以通过事件处理程序的参数 获取到事件对象
  • React中的事件对象叫做:合成事件(对象)
  • 合成事件:兼容所有浏览器,无需担心跨浏览器兼容性问题
代码语言:javascript
复制
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()也必须写

代码语言:javascript
复制
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'))

方法二:简化写法 推荐使用

代码语言:javascript
复制
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中的值,这是错误的!!
代码语言:javascript
复制
// 正确
this.setState({
    count:this.state.count+1
})
// 错误
this.state.count += 1
  • setState()作用:1.修改state 2.更新UI

计数器

代码语言:javascript
复制
 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结构清晰
代码语言:javascript
复制
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与组件实例绑定到一起
代码语言:javascript
复制
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 函数 改成箭头函数

代码语言:javascript
复制
  // 事件处理程序
 onIncrement = ()=>{
    this.setState({
      count:this.state.count + 1
    })
 }
在这里插入图片描述
在这里插入图片描述

6. 表单处理

6.1 受控组件

  • HTML中的表单元素是可输入的,也就是有自己的可变状态
  • 而,React中的可变状态通常保存在state中,并且只能通过setState()方法来修改
  • React将state与表单元素值value绑定到一起,由state的值来控制表单元素的值
  • 受控组件:其值受到React控制的表单元素
代码语言:javascript
复制
<input type="text" value={this.state.txt}/>

步骤: 1.在state中添加一个状态,作为表单元素的value的值(控制表单元素值的由来) 2.给表单元素绑定change事件,将表单元素的值 设置为state的值(控制表单元素值的变化)

代码语言:javascript
复制
<input type="text" value={this.state.txt} 
onChange={e=>this.setState({txt:e.target.value})}/>

文本框 改变值

代码语言:javascript
复制
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)

代码语言:javascript
复制
<input type="checkbox" checked={this.state.check} onChange={this.handleChecked}>
  • 多表单元素优化 问题:每个表单元素都有一个单独的事件处理程序太繁琐 优化:使用一个事件处理程序同事处理多个表单元素 步骤:
    • 1.给表单元素添加name属性,名称与state相同
    • 2.根据表单元素类型获取对应值
    • 3.在change事件处理程序中通过[name]来修改对应的state
代码语言:javascript
复制
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对象

代码语言:javascript
复制
constructor(){
    super()
    this.txtRef = React.createRef()
}

2.将创建好的ref对象添加到文本框中

代码语言:javascript
复制
<input type="text" ref={this.txtRef}/>

3.通过ref对象获取文本框的值

代码语言:javascript
复制
console.log(this.txtRef.current.value)
代码语言:javascript
复制
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的思想。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021-08-05,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 事件绑定
  • 2. 事件对象
  • 3. 有状态组件和无状态组件
  • 4. 组件中的state 和setState()
    • 4.1 state的使用
      • 4.2 setState()修改状态
      • 5. 事件绑定this指向
        • 5.1 箭头函数
          • 5.2 Function.prototype.bind()
            • 5.3 class的实例方法 (推荐使用)
            • 6. 表单处理
              • 6.1 受控组件
                • 6.2 非受控组件
                领券
                问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档