脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → React → React事件处理

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

 更新时间：2022年10月31日 10:19:12   作者：搞前端的小菜  
这篇文章主要介绍了React事件处理过程中传参的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧

摘要

首先我们知道，在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事件处理 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • React实现一个通用骨架屏组件示例

    React实现一个通用骨架屏组件示例

    骨架屏就是在页面数据尚未加载前先给用户展示出页面的大致结构，直到请求数据返回后再渲染页面，补充进需要显示的数据内容，本文就介绍了React实现一个通用骨架屏组件示例，分享给大家，感兴趣的可以了解一下
    2021-12-12
  • 简单的React SSR服务器渲染实现

    简单的React SSR服务器渲染实现

    这篇文章主要介绍了简单的React SSR服务器渲染实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-12-12
  • React中Ant Design组件日期编辑回显的实现

    React中Ant Design组件日期编辑回显的实现

    本文主要介绍了React中Ant Design组件日期编辑回显的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2025-04-04
  • 解决配置setupProxy.js代理,页面报错404问题

    解决配置setupProxy.js代理,页面报错404问题

    这篇文章主要介绍了解决配置setupProxy.js代理,页面报错404问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • react组件传值的四种方法

    react组件传值的四种方法

    本文主要介绍了react组件传值的四种方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • React项目中服务器端渲染SSR的实现与优化详解

    React项目中服务器端渲染SSR的实现与优化详解

    在传统的 React 项目里,页面的渲染工作是在浏览器里完成的,而服务器端渲染（SSR）则是让服务器先把 React 组件渲染成 HTML 字符串,再把这个 HTML 字符串发送给浏览器,下面我们就来看看具体实现方法吧
    2025-03-03
  • React Hook之使用Effect Hook的方法

    React Hook之使用Effect Hook的方法

    这篇文章主要为大家详细介绍了React 使用Effect Hook的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
    2022-03-03
  • create-react-app使用antd按需加载的样式无效问题的解决

    create-react-app使用antd按需加载的样式无效问题的解决

    这篇文章主要介绍了create-react-app使用antd按需加载的样式无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • React+Router多级导航切换路由方式

    React+Router多级导航切换路由方式

    这篇文章主要介绍了React+Router多级导航切换路由方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React中引用CSS方式及写法大全(三种方式)

    React中引用CSS方式及写法大全(三种方式)

    在React中引用CSS的方法有多种,可以根据个人的喜好和项目的需求来选择，本文主要介绍了React中引用CSS方式及写法大全，感兴趣的可以了解一下
    2023-10-10

最新评论