react中受控组件和非受控组件

受控和非受控,我们可以理解为状态,而这个时候的状态,都是通过函数来控制。
我们在html中遇到的表单元素【input】【textarea】等,都是自身元素有状态的元素,而且还会随着用户的输入更新状态,而用户的更新都会触发函数来改变表单元素的状态。
在react中,可变的状态我们都保存在状态属性中,而且只能用setState来更新,是不是很怀恋vue中直接双向绑定的形式,直接通过this来访问data并且修改?

我们通过使react变成单一数据源的状态,当用户输入的时候,表单的状态仍然被react组件所控制,所以在react中,表单元素的值受react控制的元素成为【受控组件】

官网的受控组件例子

可以看到我们input标签绑定的value实际上是我们react中state中的value,所以不管怎么变化,我们input中显示的值始终是我们的state.value。
而我们绑定的onChange事件,实际上就是每一次表单状态改变的时候调用handleChange事件,我们可以通过对state中value进行改变而达到实时渲染的目的

发表评论

电子邮件地址不会被公开。 必填项已用*标注