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

逃离我推掉我的手 2022-12-12 15:30 87阅读 0赞

#### 1.响应式数据绑定 ####

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

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

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

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

#### 2.绑定事件 ####

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

然后我们在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进行绑定。

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

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

个人博客：[Karma’s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[Karma_s Blog]: http://karma520.com/2020/10/08/24%20React%E5%AE%9E%E4%BE%8B1-%E5%93%8D%E5%BA%94%E5%BC%8F%E5%8E%9F%E7%90%86%E5%92%8C%E6%95%B0%E6%8D%AE%E7%BB%91%E5%AE%9A/
[Link 1]: https://github.com/kay-520/React_study