React之Froms
In React, a <textarea>
uses a value
attribute instead. This way, a form using a <textarea>
can be written very similarly to a form that uses a single-line input:
React中 使用value属性显示区域内容。
<textarea value={this.state.value} onChange={this.handleChange} />
Note that the Coconut option is initially selected, because of the selected
attribute. React, instead of using this selected
attribute, uses a value
attribute on the root select
tag. This is more convenient in a controlled component because you only need to update it in one place. For example:
hmtl和react中使用select的区别
html中使用子元素中的selected属性标注
<select>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option selected value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
react中在父元素中加入value,然后在通过change时间,修改state中的value,
class FlavorForm extends React.Component {
constructor(props) {
super(props);
this.state = {value: 'coconut'}; this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
} handleChange(event) {
this.setState({value: event.target.value});
} handleSubmit(event) {
alert('Your favorite flavor is: ' + this.state.value);
event.preventDefault();
} render() {
return (
<form onSubmit={this.handleSubmit}>
<label>
Pick your favorite La Croix flavor:
<select value={this.state.value} onChange={this.handleChange}>
<option value="grapefruit">Grapefruit</option>
<option value="lime">Lime</option>
<option value="coconut">Coconut</option>
<option value="mango">Mango</option>
</select>
</label>
<input type="submit" value="Submit" />
</form>
);
}
}
如此一来,react中对input/select、textarea的取值统一为取value属性的值
React之Froms的更多相关文章
- angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例
基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...
- react组件的生命周期
写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...
- 十分钟介绍mobx与react
原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...
- RxJS + Redux + React = Amazing!(译一)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...
- React 入门教程
React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...
- 通往全栈工程师的捷径 —— react
腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...
- 2017-1-5 天气雨 React 学习笔记
官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...
- RxJS + Redux + React = Amazing!(译二)
今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...
- React在开发中的常用结构以及功能详解
一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...
随机推荐
- Git初步学习
版本控制系统version control system 多人协作开发 历史记录 恢复到任意历史版本-代码状态 错误恢复 多功能并行开发 版本控制系统分类: 本地版本控制系统---------个人计算 ...
- C语言的总结
在C语言考试的中,我成绩不是很好,其实在学习C语言的时候我没有好好去学过,我知道了是我自己的错误,我不应该抱着侥幸的心里去上课的,我会去好好听课的哦l
- 【网络】IP地址格式转换(htonl、ntohl;inet_addr、inet_ntoa)
1.htonl ()和ntohl( ) u_long PASCAL FAR ntohl (u_long netlong); u_short PASCAL FAR ntohs (u_short nets ...
- sphinx全文检索 安装配置和使用
公司项目刚刚导入大量产品数据,然后发现网站的产品搜索很卡,原本是原生sql的like来做模糊搜索,数据量20W的时候还可以接受,但是上百万就很卡了,所以需要做优化. 经过考虑,打算采用全文检索 sph ...
- MongoDB 备份(mongodump)与恢复(mongorestore)
MongoDB数据备份 在Mongodb中我们使用mongodump命令来备份MongoDB数据.该命令可以导出所有数据到指定目录中. mongodump命令可以通过参数指定导出的数据量级转存的服务器 ...
- 数字图像处理作业使用OpenCV - 配置
使用环境:Windows7 旗舰版 + vs2008 + OpenCV2.0a 基本上配置都是通过网上一个教程,在此附上地址 Click ME. 为了避免因不同版本而出现的安装问题,我还是下载了2.0 ...
- 手机版web相关meta配置
若页面需默认用ie兼容内核,增加标签: 若页面需默认用ie标准内核,增加标签: --> 页面标题
- sql语句查询服务器的数据库,数据库的全部表和表的全部列
下面是数据库的结构: 数据库名是:edushi_zixunok;表名是infoArticle --获取所有用户名 SELECT * FROM sys.sysusers --获取所有用户数据库 SELE ...
- python 学习1
安装环境 python(2.7.x)(64位) + django(1.9.7) + python-mysql(64位) 安装python时自带pip与easy_install,因此可用 pip ins ...
- SQL server 查询某个表在哪些存储过程(SP)中使用到
1.查询某个表被哪些存储过程(以下简称 SP)使用到 : select distinct object_name(id) from syscomments where id in (select ob ...