React-数据双向绑定

导语：与Vue、Angular自带的数据双向绑定指令相比，React是单向的数据更新。本节内容我们就来介绍一下如何在react中实现数据的双向绑定。

回顾之前内容，我们如果要更新数据，其实就是更新state。所以我们双向绑定的原理就是实时更新state值。

首先在Person.js中定义input，代码如下：

效果图：

我们想实现的效果是，当在输入框输入内容时，name 也及时更新为输入的内容。

首先，我们需要定义onChange方法，来到Person.js，代码如下：

接着，需要在App.js中 定义changed属性来调用方法，代码如下：

changed=

name=

age=

myClick=

>

接下来实现nameCangedHandler方法，代码如下：

nameCangedHandler= (event)=>{

this.setState({

persons:[

{name:'Lily',age:28},

{name:'Mary',age:38},

{name:'Candy',age:22}]

})

}

注意：现在只给第一个输入框添加的事件，如果是多个情况，我们会在循环的时候来实现。

如果我们希望输入框默然显示name 数据，在react中，需要定义defaultValue属性，而不是value。具体定义代码形式如下：

效果图如下：

结语：下节内容我们将介绍react中定义组件样式的方式。感谢大家的关注！