React约束性组件与非约束性组件

原创 前端工程师_钱成 随笔 React 196阅读 2018-04-14 18:11:34 举报

来源:https://blog.csdn.net/function__/article/details/72357251
一、表单组件(约束性组件和非约束性组件)
1、约束性组件,由React管理它的value。下面这个value属性由 this.state.name,进而由 this.handleChange 负责管理的。实际上 input 的 value 不是用户输入的内容。而是onChange 事件触发之后,由 this.setState 决定。约束性组件显示的值和用户输入的值虽然很多时候是相同的,但他们是两码事。约束性组件显示的是 this.state.name 的值。你可以在handleChange中对用户输入的值做任意的处理,比如你可以做错误校验。

2、非约束性组件,由原生DOM管理它的value。下面这个 defaultValue 其实就是原生DOM中的 value 属性。这样写出的来的组件,其value值就是用户输入的内容,React完全不管理输入的过程。

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

4、React 把 input,textarea 和 select 三个组件做了抽象和封装,他们有统一的 value 属性 和 onChange 事件。

5、checkbox改变的不是 value ,而是 checked 状态。

6、一个示例。下面是一个包含了 input,textarea, select, radio 的表单,并且做了简单的校验:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复