React 什么时候该使用受控和非受控表单控件

纯属搬砖，翻译自原文 Controlled and uncontrolled form inputs in React don't have to be complicated

非控制的input很像传统的HTML表单input

他们能记住你输入的内容，你可以获取他们的值通过使用 ref 。比如，在一个按钮的onClick事件：

换句话说， 你必须去'拉取(pull)'这个字段的值当你需要它的时候 。这可以发生在表单已经被提交的时候。

那是实现表单input的最简单的方法。当然有的时候用它会很有效：在简单的表单中，还有学习React的时候。

但他不够强大，接下来看看那些受控的input

一个受控制的input 接受当前的“值”作为属性，和一个回调函数去改变那个“值”，你可以说这个方法更“React”（但不意味着你必须一直用它）

这个input的“值”必须保存在 state 里。典型的，渲染那个input的组件保存在他的 state :

(当然，他可以在另一个组件的state，甚至是分离的state store里)

每次当你输入一个新的字符， handleNameChange 就被调用。它获取input的最新值并把它更新到state。

还有其他的控件，比如 checkboxes 、radios a、selects 、 textareas。

让一个元素“受控”就是通过一个属性设置它的值。

每个表单控件都有不同的属性去设置它的值，以下是汇总表格：

受控和非受控表单控件都有各自的有点。 评估你的具体状况选择最适合的方法

如果你的表单很简单，仅限于UI的反馈，非受控的配合refs完全可以。你不必听那些各种文章说的“不好”

HTML： JS： function keyLogin(){ if (event.keyCode==13) //回车键的键值为13 document.getElementById("ii").click()//调用按钮的点击事件}

---