React-属性传值

导语:本节内容我们主要介绍两个知识点，一个是如何给事件传参，另一个是如何通过属性传递事件。

回顾上节内容，我们定义了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中实现数据双向绑定。感谢大家的关注！