表单
在 React 里，HTML 表单元素的工作方式和其他的 DOM 元素有些不同。
一般来说，表单以及表单中的控件（如：input、select……）是页面中与 JavaScript 打交道最多的元素了。虽然我们可以通过 ref 的
形式去操作它们，但是这样会比较麻烦，React.js 为我们提供了一个更好的方式把 React.js 中的数据以及逻辑与表单控件关联起来。
受控组件
`受控组件` : 用 props 传入数据的话，组件可以被认为是受控（因为组件被父级传入的 props 控制）
`非受控组件` : 数据只保存在组件内部的 state 的话，是非受控组件（因为外部没办法直接控制 state）
广义来说，页面中的任意元素都是一个独立的组件，表单控件也是，它们内部也会维护属于自己的状态（如：value，selected，checked……），当然这些状态是由原生实现的，而非 React.js 来控制的，但是有的时候我们希望通过 React.js 来管理和维护表单控件的状态，我们把这种控件（控件）称为： **受控组件**， 针对不同的组件，状态的维护方式也有所差异
- input
- textarea
- select
通过 state 来控制组件状态
- 创建 state 与组件的某个状态进行绑定
- 监听组件某些事件来更新 state
input
通过受控组件，可以更加便捷的操控组件交互
textarea
textarea 与 input 类似，但是需要注意的是： 使用 value ，而不是 内容（innerHTML）
select
select 在 React.js 中也做了一些处理，不在是通过 selected 属性来表示选中元素，而是通过 select 标签的 value 属性
多选
我们还可以设置多选 select，对应的 value 就是一个数组
单选
radio 和下面的 checkbox 需要注意的是，受控的属性不在是 value ，而是 checked
非受控组件
话又说回来，通过上面的学习，我们知道，每个受控组件，且不同的类型的受控组件它能控制的状态只有那么一些：value、checked，
但是实际上一个组件的状态远远不止这些，比如 input 的焦点、禁用、只读 等，都是组件的状态，如果每一个状态都通过上面的方式
来管理，就会特别的麻烦了。这个时候，我们就需要用其他方式来处理了：DOM
Refs & DOM
React.js 提供了多种方式来获取 DOM 元素
- 回调 Refs
- React.createRef()
ref 属性
引用的意思，通过 ref 来绑定组件（原生元素），对组件（元素）进行操作
无论是 回调 Refs 还是 React.createRef()，都需要通过一个属性 ref 来进行设置
回调 Refs
这种方式，我们在前面已经使用过了
React.createRef()
该方法返回一个 ref 对象，在 jsx 通过 ref 属性绑定该对象，该对象下的 current 属性就指向了绑定的元素或组件对象
建议
- 尽量避免从 props 中派生 state
- 尽量使用 props，避免使用 state
网友评论