参见:https://goshakkk.name/controlled-vs-uncontrolled-inputs-react/

非受控:

  1. onSubmit = ()=>{
  2. const val = this._input.value;
  3. }
  4.  
  5. <input ref={input =>this._input=input}>

  

受控:value prop

选择

1、若form简单,值可以一次性在提交时候检索或验证,则优先使用非受控,简单

2、实时验证、异步表单数据、组合验证等,需要实时使用表单中的值,则使用受控组件

react 表单受控和非受控的更多相关文章

  1. react 表单(受控组件和非受控组件)

    我们知道表单元素与其他的普通DOM元素来说是不一样的,它们保存了自己的一些状态. 我们主要说的就是表单元素中的受控组件和非受控组件. 受控组件就是这个组件的状态是我们(react)控制的,这个组件的行 ...

  2. 七天接手react项目 —— 生命周期&受控和非受控组件&Dom 元素&Diffing 算法

    生命周期&受控和非受控组件&Dom 元素&Diffing 算法 生命周期 首先回忆一下 vue 中的生命周期: vue 对外提供了生命周期的钩子函数,允许我们在 vue 的各个 ...

  3. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  4. Vue 中的受控与非受控组件

    Vue 中的受控与非受控组件 熟悉 React 的开发者应该对"受控组件"的概念并不陌生,实际上对于任何组件化开发框架而言,都可以实现所谓的受控与非受控,Vue 当然也不例外.并且 ...

  5. 受控组件 & 非受控组件

    在 React 中表单组件可分为两类,受控与非受控组件. 一. 受控组件 设置了 value 的 <input> 是一个受控组件. 对于受控的 <input>,渲染出来的 HT ...

  6. react 表单获取多个input

    react  表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...

  7. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  8. 浅谈React受控与非受控组件

    背景 React内部分别使用了props, state来区分组件的属性和状态.props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变.而state维持组件内部的状态更 ...

  9. React学习之受控和非受控组件

    受控组件是通过事件完成对元素value的控制,反之就是非受控组件. 1.受控组件的value通过onChange事件来改变,非受控不需要通过事件来改变value. 2.受控组件通过事件通过setSta ...

随机推荐

  1. 优雅的使用windows

    1. 快捷键 win+数字键:打开任务栏对应位置的程序 eg:快捷打开程序,重复该组合键有两个效果,如果只打开了一个窗口,再次按下组合键即可最小化,如果打开了多个窗口,则可以在同一程序的多个窗口中切换 ...

  2. 七牛云图片的存储与处理--基于node

    1. 手动上传 . 快速入门,这个简单,可以参考七牛官方文档: https://developer.qiniu.com/kodo/manual/1233/console-quickstart#step ...

  3. os.remove异常处理

    这种情况,正反斜杠都没问题.(windows环境下) 这种情况会出现下列异常 对于目录的形式,把反斜杠改成正斜杠就好了

  4. 蚂蚁金服mPaaS 3.0发布 助力客户智能化构建超级App生态

    1月4日,蚂蚁金融科技宣布蚂蚁金服移动开发平台mPaaS(mobile Platform-as-a-Service)升级到3.0版本,“新版本以智能技术助力客户构建自己的超级 App,企业可以拥有等同 ...

  5. deep learning的一些知识点

    softmax loss: softmax:     softmax的作用,将fc的输出映射成为(0,1)的概率,并将其差距拉大. cross entropy loss:   y是样本的真实标签,为1 ...

  6. 使用Microsoft SyncToy 文件同步/备份 自动化处理

    SyncToy 是由 微软 推出的一款免费的文件夹同步工具.百度搜索Microsoft SyncToy,官网可以直接下载 安装完成后 操作也非常简单,主要有三种模式 synchronize :在这个模 ...

  7. java中,字符串和集合判断是否为空

    字符串: 集合: 不为空

  8. http://zaojiasys.jianshe99.com 建造师数据泄漏,可以查看全部所有人的信息!

  9. Jekyll博客添加Valine评论

    Jekyll博客添加Valine评论 关于github搭建jekyl博客,在这里不做过多描述,详情参考: 百度搜索关键字:github搭建jekyll博客 官网:https://www.jekyll. ...

  10. 关于node

    nodejs npm常用命令 npm是一个node包管理和分发工具,已经成为了非官方的发布node模块(包)的标准.有了npm,可以很快的找到特定服务要使用的包,进行下载.安装以及管理已经安装的包. ...