导语:本节内容我们主要介绍两个知识点,一个是如何给事件传参,另一个是如何通过属性传递事件。
回顾上节内容,我们定义了state并动态修改state的内容:
switchNameHandler= ()=>{
this.setState({
persons:[
{name:'露西',age:100},
{name:'Lily',age:28},
{name:'Mary',age:38},
{name:'Candy',age:22}]
})
}
在实际开发过程中,我们需要在触发事件时通过传递的参数来动态更改state的值。因此我们将上面代码更改为如下形式:
switchNameHandler= (newName)=>{
this.setState({
persons:[
{name:newName,age:100},
{name:'Lily',age:28},
{name:'Mary',age:38},
{name:'Candy',age:22}]
})
}
上面的newName 是传递过来的形参。因此在触发事件时,需要携带一个实参,将调用方法的代码定义为如下形式:
onClick={()=>this.switchNameHandler('露西')}>
更改状态值
或者
更改状态值
在方法调用时如果要携带参数,有上面两种写法,推荐第二种写法。注意:在react中不能写为this.switchNameHandler('露西') 的形式。
上面我们在更改状态值时,直接触发的是父组件中的点击事件,如果我们希望点击子组件中的p标签来触发方法,该如何实现?
在React中,可以通过属性传递事件。具体实现代码形式如下:
首先App.js中定义事件属性
name=
age=
myClick=
>
然后在Person.js中触发属性事件:
onClick={props.myClick}>
Hello, my name is{props.name}, i'm{props.age}years old.
当我们点击第一个Person组件,效果图如下:
结语:下节内容我们将介绍在react中实现数据双向绑定。感谢大家的关注!
领取专属 10元无门槛券
私享最新 技术干货