React实例响应式设计和数据绑定
React中的响应式设计原理和数据的绑定方法,俗话说的好:“宝剑磨的好,理论不能少”。这节课我们不仅要编写效果,还要讲理论,这节课很重要!!!,因为这涉及React中的设计思想和你以后的编程思路。
响应式设计和数据的绑定
React不建议你直接操作DOM元素,而是要通过数据进行驱动,改变界面中的效果。React会根据数据的变化,自动的帮助你完成界面的改变。所以在写React代码时,你无需关注DOM相关的操作,只需要关注数据的操作就可以了(这也是React如此受欢迎的主要原因,大大加快了我们的开发速度)。
现在的需求是增加Xiaojiejie的服务项,就需要先定义数据。数据定义在Xiaojiejie组件中的构造函数里constructor。
constructor(props){ 构造函数
// 调用父类方法,继承
super(props)
this.state = {
inputValue:"你好", //value的数据
list:[] //类表数据
}
}
在React中的数据绑定和Vue中几乎一样,也是采用字面量(我自己起的名字)的形式,就是使用{}来标注,其实这也算是js代码的一种声明。比如现在我们要把inputValue值绑定到input框中,只要写入下面的代码就可以了。其实说白了就是在JSX中使用js代码。
<input value={this.state.inputValue}/>
现在需要看一下是不是可以实现绑定效果,所以把inputValue赋予一个 你好,然后预览看一下效果。在这里我们并没有进行任何的DOM操作,但是界面已经发生了变化,这些都时React帮我们作的,它还会自动感知数据的变化。
绑定事件
这时候你到界面的文本框中去输入值,是没有任何变化的,这是因为我们强制绑定了inputValue的值。如果要想改变,需要绑定响应事件,改变inputValue的值。比如绑定一个改变事件,这个事件执行inputChange()(当然这个方法还没有)方法。
<input value={this.state.inputValue} onChange={this.inputChange}/>
现在还没有inputChange()这个方法,在render()方法的下面建立一个inputChange()方法,代码如下:
这时候会发现响应事件可以使用了,但是如何获得我们输入的值那,程序中输入下面的代码。
inputChange(e){
console.log(e);
console.log(e.target.value);
}
这时候控制台是可以打印出输入的值的,视频中会有演示。看到获得了输入的值,想当然的认为直接改变inputValue的值就可以了(错的).
inputChange(e){
console.log(e.target.value);
this.state.inputValue=e.target.value;
}
写完后再进行预览,会发现程序直接报错了(加项服务还真的有点难度哦,大宝剑不好作的…)。
其实我们范了两个错误:
- 一个是this指向不对,你需要重新用bind设置一下指向(ES6的语法)。或者使用箭头函数
- 另一个是React中改变值需要使用this.setState方法。
第一个错误很好解决,直接再JSX部分,利用bind进行绑定就好。
<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
//使用箭头函数的方式
<input value={this.state.inputValue} onChange={this.inputChange} />
这步做完,我们还需要加入setState方法,改变值。代码如下:
// 或者使用.bind(this) 绑定事件
inputChange=(e)=>{
console.log(e.target.value)
console.log(this)
this.setState({//修改数据
inputValue:e.target.value
})
}
技术胖第一博客网站:https://jspang.com/detailed?id=46#toc220