P08: * 响应式设计和数据的绑定及绑定事件

悠悠 2023-10-06 20:45 15阅读 0赞

#### React16 基础 ####

*  阐述
 *  响应式设计和数据的绑定
 *  绑定事件

## 阐述 ##

本文我们主要了解一下React中的响应式设计原理和数据的绑定方法，俗话说的好：”理论是磨好宝剑的唯一标准”。

接下来我们不仅要编写效果，还要讲理论，本节很重要，因为这涉及React中的设计思想和你以后的编程思路。

## 响应式设计和数据的绑定 ##

React不建议你直接操作DOM元素，而是要通过数据进行驱动，改变界面中的效果。

React会根据数据的变化，自动的帮助你完成界面的改变。

所以在写React代码时，你无需关注DOM相关的操作，只需要关注数据的操作就可以了（这也是React如此受欢迎的主要原因，大大加快了我们的开发速度）。

现在的需求是增加美女的服务项，就需要先定义数据。

数据定义在 `Beauty` 组件中的构造函数里 `constructor`。

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

在React中的数据绑定和Vue中几乎一样，也是采用 `字面量(我自己起的名字)的形式`，就是使用`{}`来标注，其实这也算是js代码的一种声明。

比如现在我们要把 `inputValue` 值绑定到 `input` 框中，只要写入下面的代码就可以了。

其实说白了就是在JSX中使用js代码。

现在需要看一下是不是可以实现绑定效果，所以把 `inputValue` 赋予一个 `willem`，然后预览看一下效果。

在这里我们并没有进行任何的DOM操作，但是界面已经发生了变化，这些都时React帮我们作的，它还会自动感知数据的变化。

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_12_color_FFFFFF_t_70_g_se_x_16]

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]

## 绑定事件 ##

这时候你到界面的文本框中去输入值，是没有任何变化的，这是因为我们强制绑定了`inputValue`的值。

如果要想改变，需要绑定响应事件，改变`inputValue`的值。

比如绑定一个改变事件，这个事件执行`inputChange()`(当然这个方法还没有)方法。

现在还没有 `inputChange()` 这个方法，在 `render()` 方法的下面建立一个 `inputChange()` 方法，默认传入一个`e`值，在控制打印一下，代码如下：

inputChange(e){
       console.log(e);
    }

这时候会发现响应事件可以使用了，但是如何获得我们输入的值那，在程序中输入下面的代码。

inputChange(e){
        console.log(e.target.value);
    }

这时候控制台是可以打印出输入的值的，如下图演示。

![在这里插入图片描述][36004d09b76b454c8ae4c40f4f33b9ea.gif_pic_center]

import React,{Component,Fragment } from 'react'
    
    class Beauty extends Component{
        //js的构造函数，由于其他任何函数执行
        constructor(props){
            //调用父类的构造函数，固定写法
            super(props)
            this.state={
                // input中的值
                inputValue:'willem',
                //服务列表
                list:[]
            }
        }
    
        render(){
            return (
                <Fragment>
                <div>
                    <input value={this.state.inputValue} onChange={this.inputChange} />
                    <button>增加服务</button>
                 </div>
                <ul>
                    <li>头部按摩</li>
                    <li>精油推背</li>
                </ul>
                </Fragment>
            )
        }
    
        inputChange(e){
            console.log(e.target.value);
        }
    }
    
    export default Beauty

**看到获得了输入的值，想当然的认为直接改变 `inputValue` 的值就可以了(错的)。**

其实我们范了两个错误：

1、一个是`this`指向不对，你需要重新用`bind`设置一下指向(ES6的语法)。  
2、另一个是React中改变值需要使用 `this.setState` 方法。

第一个错误很好解决，直接再JSX部分，利用 `bind` 进行绑定就好。

这步做完，我们还需要加入`setState`方法，改变值。

代码如下:

inputChange(e){
        
        // console.log(e.target.value);
        // this.state.inputValue=e.target.value;
        this.setState({
        
            inputValue:e.target.value
        })
    }

现在测试一下，输入框可以改变值了，如下图：

![在这里插入图片描述][7616d45fecb249dfbbba0c977c11c478.gif_pic_center]  
其实本文内容很重要，里边设计了React的重要思想，建议大家可以反复多看两遍，虽然不难，但是这是一个最基本的思想的转变。

下节内容可要真的增加服务项目了，不要走开哦。

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_12_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/db1131f9c3e843dda48c59aa584cb090.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_12,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAd2djaGVufg_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/926d33f4e4014d0dab3634013badf430.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAd2djaGVufg==,size_20,color_FFFFFF,t_70,g_se,x_16
[36004d09b76b454c8ae4c40f4f33b9ea.gif_pic_center]: https://img-blog.csdnimg.cn/36004d09b76b454c8ae4c40f4f33b9ea.gif#pic_center
[7616d45fecb249dfbbba0c977c11c478.gif_pic_center]: https://img-blog.csdnimg.cn/7616d45fecb249dfbbba0c977c11c478.gif#pic_center