P08:React实例-理论是磨好宝剑的唯一标准
本文我们主要了解一下 React 中的响应式设计原理和数据的绑定方法,俗话说的好:”理论是磨好宝剑的唯一标准”。接下来我们不仅要编写效果,还要讲理论,本节很重要,因为这涉及React
中的设计思想和你以后的编程思路。
响应式设计和数据的绑定
React
不建议你直接操作DOM
元素,而是要通过数据进行驱动,改变界面中的效果。React 会根据数据的变化,自动的帮助你完成界面的改变。所以在写 React 代码时,你无需关注 DOM 相关的操作,只需要关注数据的操作就可以了(这也是 React 如此受欢迎的主要原因,大大加快了我们的开发速度)。
现在的需求是增加美女的服务项,就需要先定义数据。数据定义在Meinv
组件中的构造函数里constructor
。
//js 的构造函数,由于其他任何函数执行 constructor(props){ super(props) //调用父类的构造函数,固定写法 this.state={ inputValue:'' , // input 中的值 list:[] //服务列表 } }
在React
中的数据绑定和Vue
中几乎一样,也是采用字面量
(我自己起的名字)的形式,就是使用{}
来标注,其实这也算是 js 代码的一种声明。比如现在我们要把inputValue
值绑定到input
框中,只要写入下面的代码就可以了。其实说白了就是在 JSX 中使用 js 代码。
<input value={this.state.inputValue} />
现在需要看一下是不是可以实现绑定效果,所以把inputValue
赋予一个’mybj’,然后预览看一下效果。在这里我们并没有进行任何的DOM
操作,但是界面已经发生了变化,这些都时React
帮我们作的,它还会自动感知数据的变化。
绑定事件
这时候你到界面的文本框中去输入值,是没有任何变化的,这是因为我们强制绑定了inputValue
的值。如果要想改变,需要绑定响应事件,改变inputValue
的值。比如绑定一个改变事件,这个事件执行inputChange()
(当然这个方法还没有)方法。
<input value={this.state.inputValue} onChange={this.inputChange} />
现在还没有inputChange()
这个方法,在render()
方法的下面建立一个inputChange()
方法,默认传入一个 e 值,在控制打印一下,代码如下:
inputChange(e){ console.log(e); }
这时候会发现响应事件可以使用了,但是如何获得我们输入的值那,在程序中输入下面的代码。
inputChange(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)} />
这步做完,我们还需要加入setState
方法,改变值。代码如下:
inputChange(e){ // console.log(e.target.value); // this.state.inputValue=e.target.value; this.setState({ inputValue:e.target.value }) }
现在测试一下,输入框可以改变值了,如下图:
其实本文内容很重要,里边设计了React
的重要思想,建议大家可以反复多看两遍,虽然不难,但是这是一个最基本的思想的转变。下节内容可要真的增加服务项目了,不要走开哦。
码云笔记 » P08:React实例-理论是磨好宝剑的唯一标准