React学习笔记

表单组件像 <input>、<textarea> 不同于其它的原生组件，因为它们会随着用户交互而改变。这些组件提供了接口方便我们管理这些交互。

交互属性

表单组件提供了一些受用户交互影响的属性

value，支持<input>、<textarea>
checked，支持<input> type类型是checkbox或者radio
selected，支持<option>

在HTML中，<textarea> 的值是通过子属性设置的。在React中，需要通过value设置。我们可以通过添加事件属性onChange监听内容的变化，onChange会在下列情况下被触发：

input或者textarea的内容改变
input的checked状态改变
select的状态改变

受控组件

设定了value的input就是一个受控组件。input里会一直展现这个值

var InputDemo = React.createClass({render: function () {return (<input type="text" value="Hello!"/>);}
});
React.render(<InputDemo />,document.body
);

渲染完成后，input里会一直显示Hello!，用户的任何输入都是无效的。如果你想随着用户的输入改变，使用onChange事件

var InputDemo = React.createClass({getInitialState: function () {return {value: 'Hello!'}},render: function () {return (<input type="text" onChange={this.handleChange} value={this.state.value}/>);},handleChange: function (event) {this.setState({value: event.target.value});}
});
React.render(<InputDemo />,document.body
);

不受控组件

value没有值或者值设为null的input是一个不受控组件。用户的任何输入都会反映到输入框中

var InputDemo = React.createClass({ render: function () {return (<input type="text" value={null}/>);}
});
React.render(<InputDemo />,document.body
);

这个时候也可以监听onChange事件，内容的改变也会触发事件。
可以通过defaultValue给input设置默认值

var InputDemo = React.createClass({render: function () {return (<input type="text" defaultValue="xxx"/>);}
});
React.render(<InputDemo />,document.body
);

React学习笔记—表单相关推荐

【HTML】学习笔记——表单、框架
[HTML]学习笔记--表单.框架 HTML 表单表单是一个包含表单元素的区域. 表单元素是允许用户在表单中输入内容,比如:文本域(textarea).下拉列表.单选框(radio-buttons) ...
在html中表单对象以什么标记开始,HTML学习笔记——表单
9.1 表单标记form 在网页中< form>< /form>标记对用来创建一个表单,即定义表单的开始和结束位置,在标记对之间的一切都属于表单的内容.在表单的标记中,可以设置 ...
html中表单涉及的标记有哪几个,HTML学习笔记--表单标记
表单是网页上的一个特定区域.这个区域是由一对标记定义的.这一步有几方面的作用.第一方面,限定表单的范围.其它的表单对象,都要插入到表单之中.单击提交按纽时,提交的也是表单范围之内的内容.第二方面,携 ...
八、PHP框架Laravel学习笔记——表单伪造和 CSRF 保护
一．表单伪造之前一直用的 GET 请求方式,而表单可以实现 POST 方式,我们来实验下: 先在 TaskController 创建两个方法,一个表单页,一个接受表单数据路由: public fun ...
低代码amis学习笔记(表单)
基本用法最基本的用法是配置表单项和提交接口API. 表单展示首先展示默认模式: 其代码 {"type": "page","body": ...
表单识别（四）-基于深度学习的表单识别)-OCR
(论文研读后,感觉有用的一些笔记,主要是给自己记录) 论文:熊雨点,基于深度学习的表单识别系统的研究与实现基于深度学习的表单识别前言: 文档检测方法: 基于扩张卷积残差网络的表单文档定位方法: 扩 ...
react学习笔记1--基础知识
什么是react A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES[React是一个用于构建用户界面的JavaScript库.] React之所以快, ...
react render没更新_web前端教程分享React学习笔记（一）
web前端教程分享React学习笔记(一),React的起源和发展:React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写 ...
react组件卸载调用的方法_好程序员web前端培训分享React学习笔记（三）
好程序员web前端培训分享React学习笔记(三),组件的生命周期 React中组件也有生命周期,也就是说也有很多钩子函数供我们使用, 组件的生命周期,我们会分为四个阶段,初始化.运行中.销毁.错误处 ...

React学习笔记—表单

交互属性

受控组件

不受控组件

React学习笔记—表单相关推荐

最新文章

热门文章