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的更多相关文章

  1. angular,vue,react的基本语法—双向数据绑定、条件渲染、列表渲染、angular小案例

    基本语法: 1.双向数据绑定 vue 指令:v-model="msg" react constructor(){ this.state{ msg:"双向数据绑定" ...

  2. react组件的生命周期

    写在前面: 阅读了多遍文章之后,自己总结了一个.一遍加强记忆,和日后回顾. 一.实例化(初始化) var Button = React.createClass({ getInitialState: f ...

  3. 十分钟介绍mobx与react

    原文地址:https://mobxjs.github.io/mobx/getting-started.html 写在前面:本人英语水平有限,主要是写给自己看的,若有哪位同学看到了有问题的地方,请为我指 ...

  4. RxJS + Redux + React = Amazing!(译一)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: https:/ ...

  5. React 入门教程

    React 起源于Facebook内部项目,是一个用来构建用户界面的 javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组件内 ...

  6. 通往全栈工程师的捷径 —— react

    腾讯Bugly特约作者: 左明 首先,我们来看看 React 在世界范围的热度趋势,下图是关键词“房价”和 “React” 在 Google Trends 上的搜索量对比,蓝色的是 React,红色的 ...

  7. 2017-1-5 天气雨 React 学习笔记

    官方example 中basic-click-counter <script type="text/babel"> var Counter = React.create ...

  8. RxJS + Redux + React = Amazing!(译二)

    今天,我将Youtube上的<RxJS + Redux + React = Amazing!>的后半部分翻译(+机译)了下来,以供国内的同学学习,英文听力好的同学可以直接看原版视频: ht ...

  9. React在开发中的常用结构以及功能详解

    一.React什么算法,什么虚拟DOM,什么核心内容网上一大堆,请自行google. 但是能把算法说清楚,虚拟DOM说清楚的聊聊无几.对开发又没卵用,还不如来点干货看看咋用. 二.结构如下: impo ...

随机推荐

  1. 《与小卡特一起学Python》 Code6 注释

    """这是一个包括多行的注释, 使用了三重引号字符串. 这不完全是注释,不过也可以相当于注释. """ #***************** ...

  2. nginx缓冲区优化

    关于缓冲, 主要是合理设置缓冲区大小, 尽量避免缓冲到硬盘时的情况 proxy_buffering proxy_buffering这个参数用来控制是否打开后端响应内容的缓冲区,如果这个设置为off,那 ...

  3. boost字符串算法

    boost::algorithm简介 2007-12-08 16:59 boost::algorithm提供了很多字符串算法,包括: 大小写转换: 去除无效字符: 谓词: 查找: 删除/替换: 切割: ...

  4. python成长之路【第八篇】:异常处理

    一.异常基础 在编程过程中为了增加友好性,在程序出现bug时一般不会将错误信息显示给用户,而是现实一个提示的页面,通俗来说就是不让用户看见大黄页!!! 语法: try: pass except Exc ...

  5. Nodejs 之Ajax的一个实例(sql单条件查询&并显示在Browser端界面上)

    1.Broswer端的Ajax <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

  6. Mac安装ctags

    Mac安装ctags mac 系统有自带的ctags,但是不支持"ctags -R"指令,需要自己在安装Exuberant Ctags 1.下载ctags 2. 安装 ./conf ...

  7. 线性表-双向链表(LinkedList)

    双向链表:如图1-3 所示,会把当前header拆分开,重新插入一个Entry<E>. LinkedList源码 0.首先这个类中的两个变量 private transient Entry ...

  8. SQLServer的数据存储结构01 文件与文件组

    在SQLServer中,每当新建一个数据库时,则会有一组相应的SQLServer文件被创建,这些单独的SQLServer文件构成的总体称为文件组. 一个数据库对应着一个文件组,在这个文件组里,会包括三 ...

  9. VB检测按键CTRL+C的次数

    Private Declare Function GetAsyncKeyState Lib "user32" (ByVal vkey As Long) As IntegerPriv ...

  10. Python ZIP压缩

    ru=lambda x:x.decode('u8') rp=lambda x:x.replace('\\','/') gb=lambda x:x.decode('gbk') class ZIP: de ...