React-3：组件之表单与受控非受控组件

表单

        在 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

---