React实例1-响应式原理和数据绑定

1.响应式数据绑定

React不建议你直接操作DOM元素，而是要通过数据进行驱动，改变界面中的效果。React会根据数据的变化，自动的帮助你完成界面的改变。所以在写React代码时，你无需关注DOM相关的操作，只需要关注数据的操作就够了。

现在的需求是增加小姐姐的服务项，就需要先定义数据。数据定义在SmailSmailGirl组件中的构造函数里constructor。

//js的构造函数，由于其他任何函数执行 constructor(props){ super(props) //调用父类的构造函数，固定写法 this.state={ inputVal:'' , // input中的值 list:[] //服务列表 } }

在React中的数据绑定和Vue中几乎一样，也是采用字面量(我自己起的名字)的形式，就是使用{}来标注，其实这也算是js代码的一种声明。比如现在我们要把inputVal值绑定到input框中，只要写入下面的代码就可以了。

<input value={this.state.inputVal} />

2.绑定事件

这时候我们在文本框中输入值，并没有什么变化，这是因为我们绑定了inputVal的值。如果要想改变，需要绑定响应事件，改变inputVal的值。

<input value={this.state.inputVal} onChange={this.inputChange}/>

然后我们在render方法下面，新建一个inputChange方法，如下：

inputChange(e){ console.log(e); console.log(e.target.value) //获取响应值 //this.state.inputValue=e.target.value; 这种写法是错误的 }

最后一个赋值方式是错误的，程序会直接报错，如以下两个错：

1.一个是this的指向不对，你需要重新用bind设置一个指向。

2.另一个是React中改变值需要使用this.setState方法

第一个错误好解决，直接使用bind进行绑定。

<input value={this.state.inputVal} onChange={this.inputChange.bind(this)}/>

第二个我们直接使用this.setState方法进行赋值。

inputChange(e){ this.setState({ inputVal:e.target.value }) }

个人博客：Karma’s Blog 源码地址：传送门