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赋予一个'mybj'

绑定事件

这时候你到界面的文本框中去输入值,是没有任何变化的,这是因为我们强制绑定了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;
}

写完后再进行预览,会发现程序直接报错了。

其实我们范了两个错误:

  1. 一个是this指向不对,你需要重新用bind设置一下指向(ES6的语法)。
  2. 另一个是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的重要思想,建议大家可以反复多看两遍,虽然不难,但是这是一个最基本的思想的转变。下节内容可要真的增加服务项目了,不要走开哦。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P08:React实例-理论是磨好宝剑的唯一标准

发表评论

提供最优质的资源集合

立即查看 了解详情