React-属性传值(传事件)

1.给事件传递一个参数

触发事件函数的形参:
在这里插入图片描述
实参是谁给出呢:是调用这个触发函数的事件给出的,这里要注意一个问题,不能直接这样写在这里插入图片描述
这样写系统运行时会直接执行这个函数,而不是通过触发执行,解决办法有如下2个方法:
1.es6提供的箭头函数:
在这里插入图片描述
2.另一种方法:bind绑定(更建议大家使用)
在这里插入图片描述
bind中第一个传的地方就是当前所指向的对象this,就是下图中的2处在这里插入图片描述

2.使用属性传值传递一个函数

目的:让子组件可以通过触发方法去执行父组件当中对应的一个方法。
即通过子组件的触发事件去执行父组件里面的一个方法。
之前写的的属性传值传递的是一个状态或者某一个值传递过去,但是这里现在传递的是一个事件。
现在的需求是在子组件里面点击p标签来更改对应的内容,那么就需要传递对应的一个事件,即点击p标签想要来触发App.js里面的switchNameHandler = (newName) =>{}方法,那就需要将这个方法switchNameHandler = (newName) =>能够传递给子组件。
子组件里面的触发事件的写法:
在这里插入图片描述
圆圈中的属性名自己随便起,它和根组件里面的name和count本质是一样的,此时在App.js当中还没有定义这个属性
在这里插入图片描述
App.js(根组件)里面如何定义这个属性:
给谁传了事件它才会拥有这个事件(即第二个Person调用才会拥有这个属性)。
在这里插入图片描述
父组件这个属性的名字与子组件里面的属性的名字一样的(都是我们起的),这个属性的目的是为了给子组件传递子组件想要的函数(传递要传递的事件),这样就将这个事件传递给了子组件里面了
子组件里面的函数的形参(props)能够接收父组件传递过来的所有值。
在这里插入图片描述
总结:具体的执行步骤:
1.子组件触发方法
在这里插入图片描述
2.到父组件里面去找传递的这个属性(myclick)的位置
在这里插入图片描述
3.执行myclick里面的指向的函数:
在这里插入图片描述
执行结束;

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值