用户在表单填入的内容，属于用户跟组件的互动，所以不能用 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. 在JavaScript中同步与异步

    在JavaScript中,一个线程执行的时候不依靠其他线程处理完毕我们称为异步,相反一个线程必须等待直到另一个线程处理完毕我们则称为同步.打个比方: (1)同步就是你在煮方便面的时候必须等水开了,你才 ...

  2. 条件注解@Conditional

    通过活动的profile,可以获得不同的Bean.Spring4提供了一个更通用的基于条件的Bean的创建,即使用@Conditonal注解 @Conditional根据满足某一个特定条件创建一个特定 ...

  3. jeesit 部署404

    1.刷新项目 2.clean 项目 3.重新部署项目 4.Ran as maven build 后在重新部署 5.重新导入maven项目

  4. nginx 升级为最新版 nginx -1.12.0

    标签:nginx 公司目前使用的nginx版本比较低(nginx-1.0.12),请网络安全公司做了一下“远程安全评估”,发现有下列漏洞: nginx URI处理安全限制绕过漏洞(CVE-2013-4 ...

  5. NopCommerce 3.80框架研究（三）替换tinymce 为KindEditor

    NopCommerce 自带的编辑器tinymce 功能不是很全.所以尝试将其替换为功能更强大的 KindEditor 并替实现文件上传和在线浏览功能 首先下载 并解压到如下位置 请注意这里是部署在N ...

  6. 常用宏OC

    #ifndef MacroDefinition_h #define MacroDefinition_h //-------------------获取设备大小--------------------- ...

  7. html body上有一条空白！！！

    html body 上莫名其妙的就出现了一条空白,怎么搞都搞不定,弄了一下午...... 解决了!!! 格式问题/

  8. Euerka环境搭建

    机器环境 windows10,IntelliJ IDEA 配置host 单节点Eureka 一.pom文件 <?xml version="1.0" encoding=&quo ...

  9. 解决MVC运行controller的时候只有有参构造函数但是程序一定要走无参构造函数的方法

    方法如下 https://www.codeproject.com/Articles/560798/ASP-NET-MVC-Controller-Dependency-Injection-for-Be

  10. 复习C++_基础、函数、数组、字符串

    程序的开发过程 程序 源程序:用源语言写的,有待翻译的程序: 目标程序:源程序通过翻译程序加工以后生成的机器语言程序: 可执行程序:连接目标程序以及库中的某些文件,生成的一个可执行文件,例如Windo ...