用户在表单填入的内容，属于用户跟组件的互动，所以不能用 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-表单操作的更多相关文章

  1. 翻译 | 玩转 React 表单 —— 受控组件详解

    原文地址:React.js Forms: Controlled Components 原文作者:Loren Stewart 译者:小 B0Y 校对者:珂珂君 本文涵盖以下受控组件: 文本输入框 数字输 ...

  2. react 表单获取多个input

    react  表单this.handleChange(key,e){ [key]:e.target.value} submit=()=>{ const {userName,age,status} ...

  3. 基于JQuery的前端form表单操作

    Jquery的前端表单操作:     jquery提供了良好的方法封装,在一些基本的操作的时候,能节省很多的麻烦,其中,在具体使用时,form表单的数据提交是最频繁也最常见的前后数据交换方式,所以在前 ...

  4. Django之form表单操作

    小白必会三板斧 from django.shortcuts import render,HttpResponse,redirect HttpRespone:返回字符串 render:返回html页面 ...

  5. 七、React表单详解 约束性和非约束性组件 input text checkbox radio select textarea 以及获取表单的内容

    一.约束性和非约束性组件: 非约束性组: MV: <input type="text" defaultValue="a" /> 这个 default ...

  6. 【JavaScript】DOM之表单操作

    DOM 表单操作 1.获取表单 获取表单元素 以Document对象中forms属性来获取当前HTML页面所有表单集合以Document对象中表单的name属性值来获取表单元元素 <body&g ...

  7. python -使用Requests库完成Post表单操作

    """ 使用Requests库完成Post表单操作 """ #_*_codingn:utf8 _*_ import requests fro ...

  8. react表单事件和取值

    常见的表单包括输入框,单选框,复选框,下拉框和多文本框,本次主要总结它们在react中如何取值. 输入框 在之前有说过输入框,可以先给input框的value绑定一个值,然后通过input框的改变事件 ...

  9. react 表单

    import React ,{PropTypes}from 'react'; import { render } from 'react-dom'; const styles={ mb10:{ mar ...

  10. React表单元素的使用

    一. <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF ...

随机推荐

  1. hibernate课程 初探单表映射3-1 hibernate单表操作简介

    本章简介: 1 单一主键 2 基本类型 3 对象类型 4 组件属性 5 单表操作CRUD实例

  2. 使用腾讯IP分享计划网站中的纯JS省市区三级联动

    JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...

  3. 常用CSS3属性整理

    常用CSS3属性整理 文本 文本超出部分折叠 white-space:nowarp; overflow:hidden; text-overflow:ellipsis word-warp 边界换行 no ...

  4. 创见VR-上海，会后总结

    第一次,参加这种VR会,感觉不错.上午突然发现自己之前的一款AR Demo下载量在10-50了,真没想到,虽然这款Demo有一处bug至今未修复 ^^.不过,看来现在AR/VR确实恨火. ZSpace ...

  5. 【extjs6学习笔记】1.10 初始： 定义类

    http://www.extjs-tutorial.com/extjs/define-new-class-in-extjs

  6. window.returnValue使用方法

    returnValue是javascript中html的window对象的属性,目的是返回窗口值,当用window.showModalDialog函数打开一个IE的模式窗口(模式窗口知道吧,就是打开后 ...

  7. ASP.NET MVC网站学习问题积累（一）

    最近工作压力比较大,不得已开始自学C#.同时网站开发业务开展迫在眉睫,只能先从ASP.NET学起.回想一下,连C#和ASP.NET的关系都没有明白,就被赶鸭子上架了...我觉得这将是我工作以来最具有戏 ...

  8. 更新KB915597补丁后导致“您的windows副本不是正版”的解决方案

    更新KB915597补丁后导致“您的windows副本不是正版”的解决方案 解决方法: 运行cw.exe(https://pan.lanzou.com/i05ya8h),直至提示成功: 重新启动操作系 ...

  9. 远程链接mongoDB robomongo

    墙裂推荐一个软件robomongo 下载地址:https://robomongo.org/download 最初不用这个软件的时候需要shell链接mongoDB,折腾了半天结果版本不匹配 用robo ...

  10. innobackupex备份脚本

    #!/bin/bash # 10 23 * * * /bin/bash /data/script/backup.sh BDATE=`date +%Y%m%d%H%M%S`BPATH=/data/bac ...