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 ...
随机推荐
- Servlet和JavaBean
1.Servlet简介: Java Servlet 是运行在 Web 服务器或应用服务器上的程序,它是作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP 服务器上的数据库或应用程序之间 ...
- LAMP stack-5.6.22 (OpenLogic CentOS 7.2)
平台: CentOS 类型: 虚拟机镜像 软件包: apache2.4.20 mysql5.6.30 php5.6.22 apache application server basic softwar ...
- 常用宏OC
#ifndef MacroDefinition_h #define MacroDefinition_h //-------------------获取设备大小--------------------- ...
- bzoj3312: [Usaco2013 Nov]No Change
题意: K个硬币,要买N个物品.K<=16,N<=1e5 给定买的顺序,即按顺序必须是一路买过去,当选定买的东西物品序列后,付出钱后,货主是不会找零钱的.现希望买完所需要的东西后,留下的钱 ...
- Android（java）学习笔记95：Android运行时异常"Binary XML file line # : Error inflating class"
在原生Android下编译APK,编译没有问题,但是在运行的时候经常出现如标题所描述的异常:"Binary XML file line # : Error inflating class&q ...
- 【洛谷3950】部落冲突（LCT维护连通性）
点此看题面 大致题意: 给你一棵树,\(3\)种操作:连一条边,删一条边,询问两点是否联通. \(LCT\)维护连通性 有一道类似的题目:[BZOJ2049][SDOI2008] Cave 洞穴勘测. ...
- 2017.12.2 用java做一个日历
1.先判断输入的日期是否为闰年 2.在判断输入的月份是否为2月 3.在获取输入的年份和月份的1月1日 的列数 4.在输出 import java.util.*; public class demo{ ...
- CentOS启动时自动加载内核模块
要想在CentOS中自动加载内核模块,需要在/etc/sysconfig/modules/目录中增加一个脚本,在此脚本中加载所需的模块. 下面是我所用的一个名为8021q.modules的脚本,用来在 ...
- Nginx高性能web服务器详解书中概要
一.Nginx功能 1.Nginx服务器以其功能丰富著称于世.它既可以作为HTTP服务器,也可以作为反向代理服务器或者邮件服务器;能够快速响应静态页面(HTML)的请求;支持FastCGI.SSL.V ...
- testC-I
总时间限制: 20000ms 单个测试点时间限制: 1000ms 内存限制: 128000kB 描述 给你一组数,a1,a2,a3,⋯,an. 令:G=gcd(a1,a2,a3,⋯,an) 现在 ...