文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2022-11-13 19:06

关注

摘要

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯