React 系列十：受控组件和非受控组件

快来加入我们吧！

"小和山的菜鸟们"，为前端开发者提供技术相关资讯以及系列基础文章。为更好的用户体验，请您移至我们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。

"Code tailor" ，如果您对我们文章感兴趣、或是想提一些建议，微信关注 “小和山的菜鸟们” 公众号，与我们取的联系，您也可以在微信上观看我们的文章。每一个建议或是赞同都是对我们极大的鼓励！

前言

这节我们将介绍 React 中受控组件和非受控组件的概念及其使用。

本文会向你介绍以下内容：

• 什么是受控组件/非受控组件
• 受控组件
• 非受控组件

什么是受控组件/非受控组件

在 HTML 中，表单元素如 <input>，<textarea> 和 <select> 表单元素通常保持自己的状态，并根据用户输入进行更新。而在 React 中，可变状态一般保存在组件的 state(状态) 属性中，并且只能通过 setState() 更新。

我们可以通过使 React 的 state 成为 “单一数据源原则” 来结合这两个形式。然后渲染表单的 React 组件也可以控制在用户输入之后的行为。

这种形式，其值由 React 控制的输入表单元素称为“受控组件”。

那么相反的，值并不由 React 进行控制，该组件自己输入，减少等等，该元素成为非受控组件。

关于什么时候使用受控组件，什么时候使用非受控组件，可以查看这一篇文章：

Controlled and uncontrolled form inputs in React don’t have to be complicated - Gosha Arinich (goshakkk.name)

受控组件

认识受控组件

默认提交表单方式

HTML 表单元素与 React 中的其他 DOM 元素有所不同，因为表单元素自然地保留了一些内部状态。

例如，这个纯 HTML 表单接受一个单独的 name：

<form>
  <label>
    名字: