react表单和绑定事件及state和props-04

Posted 2023-02-28

参考技术A

第一种方式：在事件上使用bind(this)

第二种方式：在构造函数中改变this指向

第三种方式：使用=()=>

javascript函数中的this不是在函数声明的时候定义的，而是在函数调用(即运行)的时候定义的。在react中也遵循这个原则，this指向该function的调用方，所以“调用者”不同会导致this的不同，这里的“调用者”指的是函数执行时的当前对象。

箭头函数或是bind会改变this的指向。上面的this.state，之所以能够访问到state就是改变了this的指向，不然getData里的this就是指向这个function，这是的this是undefined。

一般来说：
    1、谁调用的this就指向谁。
    2、箭头函数，bind改变后的指向父层。

在react中我们使用setState来更新数据：

但是console打印出来的值是：原数据。
这里就要提到react里setState的异步了，在react里setState这个方法是异步的，不会按顺序执行，它可能会等待一组state一起进行更新，来提高性能。下面提供一个解决办法，setState的回调setState(updater[, callback])，相当于componentDidUpdate函数：

因为在事件中使用onClick=this.setData()时方法直接执行，直接写成this.setData(data)这样会报错，所以需要使用bind():

下面看如何传递：

事件对象：在出发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

给标签添加ref属性，在事件里通过this.refs.[属性].value来获取值

双向数据绑定在vue中有，在react中是没有的，双向数据绑定就是双方的数据改变相互影响，下面只是模拟双向数据绑定：

上面的的value需要事件监听，这里面有一个react的知识点： 约束性组件和非约束性组件 。
约束性组件，简单说就是react管理了它的value，而非约束性组件的value是由原生DOM管理的。

约束性组件是这样写的：

这里的value属性不再是一个写死的值，它是this.state.data,而this.state.data是由this.inputDataChange这个监听事件负责管理的。
这个时候实际上 input 的 value 根本不是用户输入的内容。而是onChange 事件触发之后，由 this.setState 导致了一次重新渲染。不过React会优化这个渲染过程，实际它依然是通过设置input的value来实现的。

非约束性组件是这样写的：

这个defaultValue就是原生DOM中的value属性，其value值就是用户输入的内容，react不管理输入的过程。

对比约束性组件和非约束性组件的输入流程：
*约束性组件： 用户输入A -> 触发onChange事件 -> inputDataChange 中设置 state.name = “A” -> 渲染input使他的value变成A
*非约束性组件： 用户输入A -> input 中显示A

这里介绍form表单里的几种常用的子标签：
一般表单都是需要用form标签包起来：

1、react的组件从概念上看就是一个函数，可以接受一个参数最为输入值，这个参数就是props，可以把props理解为从外部传入组件内部的数据。
2、props经常被用作渲染组件和初始化状态，当一个组件被实例化之后，它的props是只读的，不可改变的。如果props在渲染过程中可以被改变，会导致这个组件显示的形态变得不可预测。只有通过父组件重新渲染的方式才可以把新的props传入组件中。
3、在组件中，我们最好为props中的参数设置一个defaultProps，并且制定它的类型。

一个组件的显示形态可以由数据状态和外部参数所决定，外部参数也就是props，而数据状态就是state
state的主要作用是用于组件保存、控制以及修改自己的状态，它只能在constructor中初始化，它算是组件的私有属性，不可通过外部访问和修改，只能通过组件内部的this.setState来修改，修改state属性会导致组件的重新渲染。

写在最后：