大多数情况下,我们建议使用受控组件(也就是用React的state来控制表单元素的value值)来实现表单。在一个受控组件里,表单数据被React组件处理。另一种方案就是非控制组件,这样的话表单数据就被DOM本身所处理。

要写一个非控制组件,来替代写一个事件处理函数来处理每一次state的更新,你可以使用ref引用来从DOM里获取表单的value值。

举个例子,这段代码在一个非受控组件里接受单个属性:

class NameForm extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
} handleSubmit(event) {
alert('A name was submitted: ' + this.input.value);
event.preventDefault();
} render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input type="text" ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}
}

在CodePen里试一试

由于一个非受控组件将数据源保留在了DOM里,那么使用非受控组件来整合React和非React代码就会更容易些。如果你想快速开发也可以写稍微少一点的代码。否则,你应该常用受控组件。

如果你还是不知道在特殊情况下你应该使用什么类型的组件,你也许看看这篇文章可以得到帮助(controlled vs uncontrolled inputs)。

默认值

在React渲染的生命周期中,表单元素中的value属性会覆盖DOM中的元素。而使用非受控组件,你经常想要让React指定初始value值,但是不再控制之后的更新。为了解决这个问题,你可以指定defaultValue属性替代value值。

render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Name:
<input
defaultValue="Bob"
type="text"
ref={(input) => this.input = input} />
</label>
<input type="submit" value="Submit" />
</form>
);
}

同样,<input type="checkbox">和<input type="radio">支持dedaultChecked属性,<select>和 <textarea>支持defaultValue。

文件输入标签
在HTML中,<input type="file"> 可以让用户从其设备存储中选择一个或多个文件上传到服务器,或通过File API进行操作。
<input type="file" />
在React中,<input type="file" /> 始终是一个不受控制的组件,因为它的值只能由用户设置,而不是以编程方式设置。
您应该使用File API与文件进行交互。以下示例显示如何创建ref节点以访问提交处理程序中的文件:
class FileInput extends React.Component {
constructor(props) {
super(props);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
alert(
`Selected file - ${this.fileInput.files[0].name}`
);
} render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Upload file:
<input
type="file"
ref={input => {
this.fileInput = input;
}} /> </label>
<br />
<button type="submit">Submit</button>
</form>
);
}
} ReactDOM.render(
<FileInput />,
document.getElementById('root')
);

在 CodePen 上尝试。

React文档(十七)非受控组件的更多相关文章

  1. React文档(五)组件和props

    组件可以让你将UI分割成独立的,可复用的模块,然后考虑将每个模块彼此隔离.从概念上理解,组件就像js中的函数.他们接受随意的输入(被称为props)然后返回React元素来描述屏幕上应该出现什么. 函 ...

  2. 浅谈react受控组件与非受控组件

    引言 最近在使用蚂蚁金服出品的一条基于react的ant-design UI组件时遇到一个问题,编辑页面时input输入框会展示保存前的数据,但是是用defaultValue就是不起作用,输入框始终为 ...

  3. React文档(十)表单

    HTML表单元素和 React里的其他DOM元素有些不同,因为它们会保留一些内部的状态.举个例子,这个普通的表单接受唯一的name值: <form> <label> Name: ...

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

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

  5. 学习React系列(四)——受控组件与非受控组件

    受控组件:通过组件的状态与属性的改变来控制组件 不可控组件:直接通过底层的dom来控制组件(具体来说就是通过绑定再底层dom上的方法来实现的,比如说ref,onChange) 受控组件 functio ...

  6. React:受控组件与非受控组件混用实战 - 译文

    原文链接:React: hybrid controlled components in action 受控组件 非受控组件 混用受控组件和非受控组件 原则一 原则二 原则三 原则四 实施方案 总结 F ...

  7. React受控组件和非受控组件

    受控组件和非受控组件主要是用来解决表单组件状态谁来控制的问题.因为用户的输入会反应在界面上,相当于视图的状态发生了变化,而react是通过虚拟DOM比对修改视图的,这里就要决定谁来控制表单组件的状态. ...

  8. React 受控组件和非受控组件

    需求用户名自动获取 onChange用户状态发生改变 就获取值 就是时时获取值 使用onChange 点击按钮 获取密码 只要绑定了点击事件 就可以获取值 通过 let usercont=event. ...

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

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

随机推荐

  1. JedisCluster简单使用

    项目中因为一些原因需要用到缓存,之前没有接触过,在此做一些简单的使用记录. 1.jedis在项目中依赖 <dependency> <groupId>redis.clients& ...

  2. 小程序 切换到tabBar页面不刷新问题

    小程序跳转的几种方式有wx.navigateTo,wx.redirectTo,wx.reLaunch,wx.switchTab等.下面我们重点研究切换到tabBar的两种方式. wx.switchTa ...

  3. 把ResNet-L152模型的ckpt文件转化为pb文件

    import tensorflow as tf from tensorflow.python.tools import freeze_graph #os.environ['CUDA_VISIBLE_D ...

  4. cocos2d-js:游戏进入后台和返回游戏的事件捕获和处理

    cocos2d-js 3.x处理 游戏置入后台和返回游戏的事件处理很方便 只需通过事件管理类cc.eventManager,自定义一个监听事件即可 代码如下 cc.eventManager.addCu ...

  5. nginx rewrite 指令

    ginx通过ngx_http_rewrite_module模块支持url重写.支持if条件判断,但不支持else. 该模块需要PCRE支持,应在编译nginx时指定PCRE源码目录, nginx安装方 ...

  6. Archlinux软件包管理pacman基本使用说明

    熟悉APT和YUM包管理的应该都知道,这两个包管理的使用命令都是采用"主命令+参数"的格式,比如"sudo apt-get install --reinstall pac ...

  7. n皇后问题——关于斜线的编号

    题目大意:在n*n的棋盘中,放置n个皇后(同一行.同一列.同一斜线,只有一个皇后) 这道题是一道非常经典的dfs模板题,同一行.同一列的判断不是很难,但同一斜线有一定的难度,下面给出关于斜线编号的解决 ...

  8. Vue系列之 => 路由匹配

    路由基本使用,加动画切换 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  9. uwsgi和nginx的故事

    要谈uwsgi,当然要先谈谈wsgi,wsgi是理论家牛顿,uwsgi就是工程家特斯拉. wsgi是缩写,全称为web server gateway interface,中文意思就是服务器的网关接口. ...

  10. .sh文件启动 jenkins

    https://jenkins.io/index.html Jenkins的war包下载http://192.168.89.132:8080/jenkins /home/xmh/.jenkins   ...