React-表单操作
用户在表单填入的内容,属于用户跟组件的互动,所以不能用 this.props
读取
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>表单</title>
<script src="./build/react.js"></script>
<script src="./build/react-dom.js"></script>
<script src="./build/browser.min.js"></script>
<script src="./build/jquery.min.js"></script> </head>
<body>
<div id="container"></div>
</body>
<script type="text/babel" >
$(document).ready(function(){
var Input=React.createClass({
getInitialState:function(){
return {value:'hello!'};
},
handleChange:function(event){
this.setState({value:event.target.value});
},
render:function(){
var value=this.state.value;
return (
<div>
<input type="text" value={value} onChange={this.handleChange}/>
<p>{value}</p>
</div>
);
}
});
ReactDOM.render(<Input/>,document.getElementById('container'));
});
</script>
</html>
上面代码中,文本输入框的值,不能用 this.props.value
读取,而要定义一个 onChange
事件的回调函数,通过event.target.value
读取用户输入的值。textarea
元素、select
元素、radio
元素都属于这种情况。
getInitialState
方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state
属性读取。例子中用var value={this.state.value}读取getInitialState读取当中的value值。当用户点击组件,导致状态变化,this.setState
方法就修改状态值,每次修改以后,自动调用 this.render
方法,再次渲染组件。
参考文档:http://www.ruanyifeng.com/blog/2015/03/react.html
React-表单操作的更多相关文章
- 翻译 | 玩转 React 表单 —— 受控组件详解
原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...
- react 表单获取多个input
react 表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...
- 基于JQuery的前端form表单操作
Jquery的前端表单操作: jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...
- Django之form表单操作
小白必会三板斧 from django.shortcuts import render,HttpResponse,redirect HttpRespone:返回字符串 render:返回html页面 ...
- 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容
一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...
- 【JavaScript】DOM之表单操作
DOM 表单操作 1.获取表单 获取表单元素 以Document对象中forms属性来获取当前HTML页面所有表单集合以Document对象中表单的name属性值来获取表单元元素 <body&g ...
- python -使用Requests库完成Post表单操作
""" 使用Requests库完成Post表单操作 """ #_*_codingn:utf8 _*_ import requests fro ...
- react表单事件和取值
常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值. 输入框 在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件 ...
- react 表单
import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...
- React表单元素的使用
一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...
随机推荐
- webpack源码之ast简介
什么是AST 树是一种重要的数据结构,由根结点和若干颗子树构成的. 根据结构的不同又可以划分为二叉树,trie树,红黑树等等.今天研究的对象是AST,抽象语法树,它以树状的形式表现编程语言的语法结构, ...
- mui的ajax例子3
mui.get() 前端页面: <!DOCTYPE html><html><head> <meta charset="utf-8"> ...
- 编程中的多字节和Unicode
在编译许多程序的时候,我们常常会出现诸如指针转换错误或者const char[] 不能转换成XX的错误,这时很可能就是项目编码的问题了,如果您使用的是VS编程环境,那么打开工程属性,里面就有个选项是给 ...
- 【作业留存】根据IATF框架,设计的一种中小型企业安全拓扑
- 初学基础python记录
1.对于python来说,最重要的就是缩进.相当于其他语言的{}中括号. 2.转义快捷等 alt+p和alt+n来复制上下一行.变量使用时得先赋值,且大小写敏感,遵循变量命名规则.Python还允许用 ...
- slenium的xpath几种定位方式
练习地址,以下面地址为例: http://www.w3school.com.cn/example/xmle/books.xml 1. 查找book对象 //book #所有的数 //book[1] ...
- UVA 10375 Choose and divide(大数的表示)
紫上给得比较奇怪,其实没有必要用唯一分解定理.我觉得这道题用唯一分解只是为了表示大数. 但是分解得到的幂,累乘的时候如果顺序很奇怪也可能溢出.其实直接边乘边除就好了.因为答案保证不会溢出, 设定一个精 ...
- 设置和重置ssh key
查看本地是否有已经生成好的ssh key $ cat ~/.ssh/id_rsa.pub 若有,先删除: $ cd ~ $ rm -rf .ssh 重新生成ssh key ssh-keygen -t ...
- IDEA搭建Maven 的聚合项目
今天突然想把自己学习在eclipse上的maven聚合项目搭建到IDEA上,结果IDEA有太多的配置步骤,导致失败了很多次,终于在网上找到了一篇博客 https://blog.csdn.net/for ...
- GMap.Net解决方案之在WinForm和WPF中使用GMap.Net地图插件的开发
在做地理位置相关的开发时,总是面临高额地图引擎费用让大部分用户望而却步,加之地图数据又是天价,那么GMap.NET就是首选了,它本身就是开源免费,服务器可以在本地缓存,以后访问时就可以直接访问. 可以 ...