通过 props 来设置其 value 值的组件便是一种 controlled 组件。典型的 form 表单中,像

  • 输入框 <input>
  • 下拉框 <select>
  • 多选框 <input type="checkbox">
  • 单选框 <input type="radio">
  • 文本框 <textarea>

这些,都可通过 props 来设置初始值,同时通过监听其身上的 onChanges 事件来将最新的值回传到 React 中。这样,组件的值便始终与 React 中的状态是同步的。

class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
this.input = React.createRef();
} handleSubmit(event) {

alert('A name was submitted: ' + this.input.current.value);

event.preventDefault();

} render() {

return (

<form onSubmit={this.handleSubmit}>

<label>

Name:

<input type="text" ref={this.input} />

</label>

<input type="submit" value="Submit" />

</form>

);

}

}

如上, controlled 类型的组件需要在组件中有对应的 state 来保存相应的值。同时需要为组件编写值更新后的监听逻辑。

对应的 uncontrolled 类型,便方便得多,它其实就是普通的 HTML 标签。

对于 uncontrolled 类型的组件,通过 ref 来获取它身上的 value 值。

class Form extends Component {
handleSubmitClick = () => {
const name = this._name.value;
// do something with `name`
} render() {

return (

<div>

<input type="text" ref={input => this._name = input} />

<button onClick={this.handleSubmitClick}>Sign up</button>

</div>

);

}

}

可以看出,uncontorlled 类型的组件,其值是存储在 DOM 节点上的,在需要的时候,比如表单提交时,再通过 ref 获取到相应的 DOM 节点取出它的值。

对比之下,controlled 类型的组件是时实地将最新的值推送(push)到 React 中,而 uncontrolled 类型的组件是在需要的时候去拉取(pull)它身上的值。

对比与取舍

虽然 ref 在官方文档中是不推荐的,也不代表说 uncontrolled 类型的组件就不能使用;虽然 controlled 类型的组件这种,数据走 state 更新和维护的方式,更加 React 一点,也不是说在编写表单时就需要全部使用 controlled 类型的组件。两者在不同情况下可以自由取舍,完全看需要。

controlled 类型的组件虽然写起来会比较麻烦,其值与 React state 始终同步,所以有一些优点,

  • 很方便地对用户输入的值进行校验,然后展示相应的错误信息。
  • 可以时实地格式化用的输入,对于特定类型的值比如信用卡,手机等。
  • 根据用户的填写情况时实将表单的提交按钮禁用或启用。

所以如果需要上述这些东西,可以考虑 controlled 类型来编写组件,而 uncontrolled 类型代码上写起来很简洁点,少了 state 及事件绑定,可用在功能简单,或者 React 快速上手,快速实现功能的场景。

相关资源

React `controlled` 及 `uncontrolled` 组件的更多相关文章

  1. react native之组织组件

    这些组件包括<TabView>,<NavigatorView>和<ListView>,他们实现了手机端最常用的交互和导航.你会发现这些组件在实际的项目中会非常有用. ...

  2. React和Vue的组件更新比较

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 24.0px "Helvetica Neue"; color: #404040 } p. ...

  3. reactjs-swiper react轮播图组件基于swiper

    react轮播图组件基于swiper demo地址:http://reactjs-ui.github.io/reactjs-swiper/simple.html 1. 下载安装 npm install ...

  4. React Native之倒计时组件的实现(ios android)

    React Native之倒计时组件的实现(ios android) 一,需求分析 1,app需实现类似于淘宝的活动倒计时,并在倒计时结束时,活动也结束. 2,实现订单倒计时,并在倒计时结束时,订单关 ...

  5. React Native 学习-组件说明和生命周期

    组件的详细说明(Component Specifications) 当通过调用 React.createClass() 来创建组件的时候,你应该提供一个包含 render 方法的对象,并且也可以包含其 ...

  6. React:快速上手(2)——组件通信

    React:快速上手(2)——组件通信 向父组件传递数据 父组件可以通过设置子组件的props属性进行向子组件传值,同时也可以传递一个回调函数,来获取到子组件内部的数据. 效果演示 子组件是输入框,父 ...

  7. 初学React:定义一个组件

    接着聊React,今天说说如何创建一个组件类. <!DOCTYPE html> <html lang="en"> <head> <meta ...

  8. React后台管理系统-file-uploader组件

    1.React文件上传组件github地址: https://github.com/SoAanyip/React-FileUpload 2.Util里边新建file-uploader文件夹,里边新建i ...

  9. 前端笔记之React(二)组件内部State&React实战&表单元素的受控

    一.组件内部的State 1.1 state state叫状态,是每一个类式组件都有的属性,但函数式组件,没有state. state是一个对象,什么值都可以定义. 在任何类式组件的构造函数中,可以用 ...

随机推荐

  1. IOS 十六进制字符串转换成UIColor

    /** * 十六进制转换成UIColor * * @param stringToConvert 十六进制字符串 * * @return UIColor */ +(UIColor *) hexStrin ...

  2. JAVA源码分析------锁(1)

    http://870604904.iteye.com/blog/2258604 第一次写博客,也就是记录一些自己对于JAVA的一些理解,不足之处,请大家指出,一起探讨. 这篇博文我打算说一下JAVA中 ...

  3. BZOJ 1640 [Usaco2007 Nov]Best Cow Line 队列变换:贪心【字典序最小】

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1640 题意: 给你一个长度为n的字符串. 你可以将原串的首字母或尾字母移动到新串的末尾. ...

  4. 三款功能强大代码比较工具Beyond compare、DiffMerge、WinMerge

    我们经常会遇到需要比较同一文件的不同版本,特别是代码文件.如果人工去对比查看,势必费时实力还会出现纰漏和错误,因此我们需要借助一些代码比较的工具来自动完成这些工作.这里介绍3款比较流行且功能强大的工具 ...

  5. checkbox怎么判断是否选中

    下面这种可以使用 if($("#checkbox1").is(':checked')) { alert("1"); } else { alert("0 ...

  6. Listen81

    Nut-Cracking Chimps Demonstrate Cultural Differences One family generally dines on Chinese takeout w ...

  7. linux 进程学习笔记-等待子进程结束

    <!--[if !supportLists]-->Ÿ <!--[endif]-->等待子进程结束 pid_t waitpid(pid_t pid, int *stat_loc, ...

  8. Shell读取文件内容【转】

    while read wOne wTwo wThreedo    [ -z $wOne ] && continue           #测试此行内容是否为空    xxx=$wOne ...

  9. BZOJ_1999_[Noip2007]Core树网的核_单调队列+树形DP

    BZOJ_1999_[Noip2007]Core树网的核_单调队列+树形DP Description 设T=(V, E, W) 是一个无圈且连通的无向图(也称为无根树),每条边带有正整数的权,我们称T ...

  10. p1020导弹拦截

    传送门 P1020导弹拦截 题目描述 某国为了防御敌国的导弹袭击,发展出一种导弹拦截系统.但是这种导弹拦截系统有一个缺陷:虽然它的第一发炮弹能够到达任意的高度,但是以后每一发炮弹都不能高于前一发的高度 ...