React事件处理过程中传参的实现方法

目录
  • 摘要
  • 1.箭头函数
  • 2.函数柯里化
  • 3.bind方法

摘要

首先我们知道，在React中，是通过小驼峰式给元素绑定事件：

  fn = ()=>{
    //执行代码
  }
  button onClick={this.fn}>111</button>

但是如果有Vue的基础，可以很清楚的看到二者的区别。在Vue中，我们可以直接给fn传递参数。

但是如果在React中我们这么做：

  fn = (value)=>{
    //执行代码
    console.log(value)
  }
  button onClick={this.fn('2222')}>111</button>

你会发现，在页面加载的时候，2222已经被打印出来了。但是点击按钮的时候并没有效果。

这说明，该方法并没有被绑定在按钮上，而是在按钮加载的时候直接调用了。

而这一点也很好理解，React并没有做向Vue这方面的处理，它是直接调用完，将返回值绑定给了onClick。所以这里我们要记住，事件绑定的时候，一定要绑定的是一个函数。

OK，现在了解了问题所在，如果我想在调用方法的时候传递参数，应该怎么做呢？

1.箭头函数

第一个方法，如果我们在给按钮绑定事件的时候，外层绑定的是一个箭头函数，里面才是我们写的方法，似乎就能完美的解决问题了：

  speak = (value) =>{
    alert(value)
  }
  <button onClick={() => {this.speak('qnmlgbd')}}>说话</button>

通过箭头函数的方式，直接给onClick绑定的就是我们定义的speak方法，并且传递好了参数。

2.函数柯里化

那如果箭头函数可以，似乎我们直接在方法里面返回一个方法，也没有什么问题。

	  say = (value)=>{
	    return ()=>{
	      alert(value)
	    }
	  }
	 <button onClick={this.say('qnmlgbd')}>说话</button>

通过这种方式，我们在onClick绑定的时候，可以不用写箭头函数了，比较好看一点。但是原理和刚刚那种方式是一个样子的。

3.bind方法

我们知道，bind方法是改变方法的this指向，并且返回的是一个方法。不会直接调用。

OK，如果bind有这个特性，我们就可以利用它解决这个问题。

 loud(value){
   alert(value)
 }
<button onClick={this.loud.bind(this,'qnmlgbd')}>说话</button>

这里可以注意一下，loud方法在定义的时候没有采用箭头函数的方式。而之前的两个方法在定义的时候都使用了箭头函数的方式。

这是因为，在React中，如果定义函数不使用箭头函数，函数里面的this会是绑定事件的元素，而不是React组件。但是如果用bind方法进行事件绑定，就不需要考虑这个问题了。

最后我们总的看一下这三种方式的差别：

export default class Child extends Component {
  say = (value)=>{
    return ()=>{
      alert(value)
    }
  }
  speak = (value) =>{
    alert(value)
  }
  loud(value){
    alert(value)
  }
  render() {
    return (
      <div>
        <button onClick={this.say('qnmlgbd')}>说话</button>
        <button onClick={() => {this.speak('qnmlgbd')}}>说话</button>
        <button onClick={this.loud.bind(this,'qnmlgbd')}>说话</button>
      </div>
    )
  }
}

到此这篇关于React事件处理过程中传参的实现方法的文章就介绍到这了,更多相关React事件处理 内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • React组件通信之路由传参(react-router-dom)

    React组件通信之路由传参(react-router-dom)

    目录 最近在学习react,现在的工作中使用的是vue,在学习的过程中对两者进行比较,加深理解. 以下是react中的一小部分知识点,我个人觉得也是比较常用的知识点,react组件通信的其中一种方式--路由传参(react组件通信的方式有多种,如props.事件回调.context.router.redux.缓存等等).现在单页面SPA应用的比较广泛,在不刷新整个页面进行部分页面的跳转,使用路由跳转便在所难免,那么react路由除了进行页面之间的跳转,还有很大一个作用就是进行页面或者组件切换时传

  • React学习笔记之事件处理（二）

    之前已经给大家介绍了React中的条件渲染(传送门),本文将给大家关于React中事件处理的相关内容,分享出来供大家参考学习,下面来一起看看详细的介绍: React的事件处理和DOM的事件处理是很相似的,只是有一些语法上的区别: React的事件名是驼峰的,不是小写的 在JSX语法中,你传递一个fucntion作为时间处理器,而不是一个string 举个例子: <button onClick={activateLasers}> Activate Lasers </button> 而

  • React事件处理的机制及原理

    React中的事件处理 在React元素中绑定事件有两点需要注意: (1)在React中,事件命名采用驼峰命名方式,而不是DOM元素中的小写字母命名方式.例如onclick要写成onClick,onchange要写成onChange等. (2)处理事件的响应函数要以对象的形式赋值给事件属性,而不是DOM中的字符串形式.例如在DOM中绑定一个点击事件应该写成: <button onclick="clickButton()"> Click </button> 而在R

  • 详解React路由传参方法汇总记录

    详解React路由传参方法汇总记录

    React中传参方式有很多,通过路由传参的方式也是必不可少的一种. 本文记录项目中会用到的路由传参方式: 路由跳转传参API + 目标路由获取参数的方式. 一.动态路由 跳转方法 Link <Link to={{ pathname: "/user/add/1" }}>跳转新增页面</Link> history.push this.props.history.push("/user/add/1"); 获参方法 this.props.match.

  • React的事件处理你了解吗

    目录 一.React的事件处理 1.与DOM事件处理的不同之处 (1)React事件的命名方式:小驼峰方式,DOM的命名方式是小写 (2)事件处理函数是以对象的方式赋值,而不是以字符串的方式赋值 (3)阻止默认事件的方式不同 2.React中事件处理函数的定义 (1)使用ES6的箭头数 (2)在构造函数中进行绑定:将事件处理函数作为类的成员函数 (3)在render函数中绑定this (4)React中事件处理函数 (5)注意事项 3.事件处理中的参数传递 (1)直接传递参数 (2)在定义UI控

  • React事件处理和表单的绑定详解

    React事件处理和表单的绑定详解

    目录 一.事件处理 1.1 React事件 1.2 事件对象 1.3 事件传参 1.4 函数组件事件处理 二.表单 一.事件处理 1.1 React事件 React 元素的事件处理和 DOM 元素类似.但是有一点语法上的不同: React 事件绑定属性的命名采用驼峰式写法,而不是小写. 例如onclick属性应该写成onClick. 如果采用 JSX的语法你需要传入一个函数作为事件处理函数,而不是一个字符串(DOM 元素的写法).例如已经定义了一个名为handleClick的函数,应该这样调用:

  • react中事件处理与柯里化的实现

    目录 1. 事件处理 阻止默认行为 合成事件 2. 柯里化 柯里化的目的 一个简单的例子 1. 事件处理 React 中元素也可接受.处理事件,但是在语法上有一点不同. 在React 中所有事件的命名采用的是小驼峰,而非原生 DOM 的纯小写,所有事件需要我们传入一个函数,而非字符串. 例如: const Button = () => { const handleClick = () => { console.log('click') } return <button onClick={

  • React事件处理过程中传参的实现方法

    目录 摘要 1.箭头函数 2.函数柯里化 3.bind方法 摘要 首先我们知道,在React中,是通过小驼峰式给元素绑定事件: fn = ()=>{ //执行代码 } button onClick={this.fn}>111</button> 但是如果有Vue的基础,可以很清楚的看到二者的区别.在Vue中,我们可以直接给fn传递参数. 但是如果在React中我们这么做: fn = (value)=>{ //执行代码 console.log(value) } button on

  • React组件内事件传参实现tab切换的示例代码

    React组件内事件传参实现tab切换的示例代码

    本文介绍了React组件内事件传参实现tab切换的示例代码,分享给大家,具体如下: 组件内默认onClick事件触发函数actionClick, 是不带参数的, 不带参数的写法: 如onClick= { actionItem } 带参数的写法, onClick = { this.activateButton.bind(this, 0) } 下面是一个向组件内函数传递参数的小例子 需求: 在页面的底部, 有四个按钮, 负责切换内容, 当按钮被点击时, 变为激活状态, 其余按钮恢复到未激活状态 分析

  • JFINAL+Ajax传参 array 数组方法 获取request中数组操作

    前台代码js var _list =[]; for (var i = 0; i < array.length; i++) { _list[i] = array[i]; } $.ajax({ type: "post", url: "", data: {"ids": _list }, dataType: "json", success: function(data){ alert("添加成功"); } }

  • React 非父子组件传参的实例代码

    React 是一个用于构建用户界面的 JAVASCRIPT 库. React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图). React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源. React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它. React 特点 1.声明式设计 −React采用声明范式,可以轻松描述应用. 2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的

  • vue中传参params和data的区别

    vue中传参params和data的区别

    目录 1.使用data传参 2.使用params传参 3.总而言之 1.使用data传参 前端请求方式为post import request from '@/utils/request' // 新增banner export function saveBanner(data){ return request({ url:'/system/banner/saveBanner', method:'post', data:data }) } 后端接口接收 /** * 保存导航图 * * @param

  • 使用layui的router来进行传参的实现方法

    如果我们需要通过链接传参的话,我们需要使用使用url+/#/参数 如下面代码我要传参id,edit/#/id=1就可以传参成功了 $(document).on('click', '#edit', function(data) { var id = $(this).attr('data-id'); var url = "edit/#/id=" + id; // console.log("edit/"+id); dialog.addOrEdit('编辑', url, '

  • Docker如何给Springboot项目动态传参的实现方法

    背景 最近有些初学Docker的朋友问到,想通过docker-compose.yml来动态给微服务传参,而不是每次都要在项目配置文件硬编码,然后构建服务镜像,最后打包发布经过一些列流程才能更新配置,那能不能直接通过docker-compose.yml里把一些配置项放到环境变量,然后springboot项目自动从环境变量获取参数呢? 场景 假设现在有一个Springboot项目,它里面有一个数据库的配置项,但是不同的数据库测试环境(DEV\SIT\UAT),数据库ip有多个,想使用同一个Sprin

  • React TypeScript 应用中便捷使用Redux Toolkit方法详解

    目录 前言 背景 Redux-Toolkit 常规使用 优化方案 优化 useDispatch 和 useSelector 优化修改 redux 状态的步骤 总结 前言 本文介绍的主要内容是 Redux-Toolkit 在 React + TypeScript 大型应用中的实践,主要解决的问题是使用 createSlice 的前提下消费 redux 状态仍旧有点繁琐的问题. 阅读本文需要的前置知识:了解 React .Redux-Toolkit .TypeScript 的使用. 关于 Redux

  • js调用Flex中的方法并向flex中传参及flex调用js示例

    首先,有了一个swf文件,test.swf,同时也有一个自动生成的html文件,test.html. 然后,在另外一个文件,test.jsp中,通过iframe,引入了test.html,即引入了swf. 现在想要在test.jsp中,向flex传参,并调用flex中的方法,我采用的方法是: 首先,在jsp中写一个调用flex的方法,如下 复制代码 代码如下: function initSWF(){ //得到swf的object var obj = window.frames["rightfra

  • Angular父子组件通过服务传参的示例方法

    今天在使用ngx-translate做多语言的时候遇到了一个问题,需要在登录页面点击按钮,然后调用父组件中的一个方法. 一开始想到了@input和@output,然而由于并不是单纯的父子组件关系,而是包含路由的父子组件关系,所以并不能使用@input方法和@output方法. 然后去搜索一下,发现stackoverflow上有答案,用的是service来进行传参,发现很好用,所以和大家分享一下. 首先,创建一个service. shared-service.ts import { Injecta

随机推荐