React的表单和状态提升

React表单

HTML表单元素和React中的其他DOM元素有所不同,因为表单生来就保留了一些内部状态。

当用户提交表单时,HTML的默认行为会使这个表单跳转到一个新页面,在React中亦是如此,在大多数情况下,我们都会构造一个处理表单并可访问用户输入表单数据的函数,实现这一点的标准方法是使用一种称之为受控组件的技术

受控组件

在React中,像inputtexteraselect这类表单元素会维持自身状态,并根据用户输入进行更新,但在React中,可变的状态通常保存在组件的状态属性中,并且可以用setState()方式来进行更新。

我们通常使React变成一种单一的数据源的状态来结合二者,React负责渲染表单的组件,仍然控制用户后续输入时所发生的变化,相应的,其值由React控制的输入表单元素称为受控组件。onChange=监听value值onSubmit=绑定提交事件

由于value使我们在表单元素上设置的,因此显示的值将始终未React数据源上,this.state.value值由于每次按键都会触发handlechange来更新当前的React的state所展示的值也会随着不同用户的输入而更新。

状态提升

使用react经常会遇到几个组件需要公用状态数据的情况,这种情况我们最好将这部分共享的状态提升至他们最忌你的父组件当中进行管理。

在React中,状态分享的是通过,将State数据提升至里需要这些数据的组件最近的父组件来完成的,这就是所谓的状态提升,我们会将子组件保存的state移到父组件中。