一、简述

父组件嵌套子组件，父组件的处理函数通过属性的方式赋值组子组件（

<GenderSelect handleSelect={this.handleSelect}></GenderSelect>

），子组件通过触发事件，委托调用父组件的处理函数，从而实现把值传给父组件（return <select onChange={this.props.handleSelect}>，

handleSelect: function(event) {
this.setState({gender: event.target.value})
}

）

二、代码

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>父子关系</title>

 </head>

 <body>

     <script src="./react-0.13.2/react-0.13.2/build/react.js"></script>

     <script src="./react-0.13.2/react-0.13.2/build/JSXTransformer.js"></script>

     <script type="text/jsx">

         var GenderSelect = React.createClass({

             render: function() {

                 return <select onChange={this.props.handleSelect}>

                 <option value="0">男</option>

                 <option value="1">女</option>

                 </select>

             }

         })

         var SignupForm = React.createClass({

             getInitialState: function() {

                 return {

                     name: '',

                     password: '',

                     gender: '',

                 }

             },

             handleChange: function(name, event) {

                 var newState = {}

                 newState[name] = event.target.value

                 this.setState(newState)

             },

             handleSelect: function(event) {

                 this.setState({gender: event.target.value})

             },

             render: function() {

                 console.log(this.state)

                 return <form>

                 <input type="text" placeholder="请输入用户名" onChange={this.handleChange.bind(this, 'name')} />

                 <input type="password" placeholder="请输入密码" onChange={this.handleChange.bind(this, 'password')} />

                 <GenderSelect handleSelect={this.handleSelect}></GenderSelect>

                 </form>

             }

         })

         React.render(<SignupForm></SignupForm>, document.body);

     </script>

 </body>

 </html>

React-组件嵌套-子组件通过委托向父组件传值的更多相关文章

  1. 前端（二十二）—— vue组件：局部组件、全局组件、父组件数据传到子组件、子组件数据传到父组件、父子组件实现todoList

    Vue组件 一.组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template,根组件的模板就是挂载点,根组件也可以显式书写模板,会替换掉挂载点 每个组件模板只能拥有一个根标签 子组 ...

  2. vue组件之间的通信以及如何在父组件中调用子组件的方法和属性

    在Vue中组件实例之间的作用域是孤立的,以为不能直接在子组件上引用父组件的数据,同时父组件也不能直接使用子组件的数据 一.父组件利用props往子组件传输数据 父组件: <div> < ...

  3. 042——VUE中组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 42.VUE学习之--组件之子组件使用$on与$emit事件触发父组件实现购物车功能

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. react native 之子组件和父组件之间的通信

    react native开发中,为了封装性经常需要自定义组件,这样就会出现父组件和子组件,那么怎么在父组件和子组件之间相互通信呢,也就是怎么在各自界面push和pop.传值. 父组件传递给子组件: 父 ...

  6. React子组件和父组件通信

    React子组件和父组件通信包括以下几个方面: 子组件获取父组件属性:props或者state 子组件调用父组件的方法 父组件获取子组件的属性:props或者state 父组件调用子组件的方法 我们从 ...

  7. 使用React.cloneElement()给子组件传值

    React提供了一个克隆组件的API: React.cloneElement( element, [props], [...child] ) 可以利用该方法,给子组件传值,使用如下: class Pa ...

  8. React篇-子组件调用父组件方法,并传值

    react 中子组件调用父组件的方法,通过props: 父组件: isNote(data){} <div className="tabC01"> <FTab ta ...

  9. React 父组件触发子组件事件

    Parent组件 import React from "react"; import Child from "./component/Child"; class ...

随机推荐

  1. 通过修改注册表来破解sqlyog

    Sqlyog作为一款可视化的数据库管理工具,各种方便我就不说了,但是未经汉化或者绿色过的软件存在30天的生命期,到期后我们就不可以使用了,要摸卸载重装,我们还可以去修改注册表,来延长它的生命期,具体步 ...

  2. RSA算法详解

    1.RSA加密算法是最常用的非对称加密算法 2.RSARSA以它的三个发明者Ron Rivest, Adi Shamir, Leonard Adleman的名字首字母命名, 3.目前学术界无法证明RS ...

  3. Windows Server 2008R2配置MySQL Cluster并将管理节点和数据节点配置成windows服务

    说明:将mysql的管理节点和数据节点配置成windows服务是为了防止有人手误关闭管理节点或数据节点的dos命令窗口,管理节点或数据节点的命令窗口误关闭可能会造成mysql某台或某几台mysql不能 ...

  4. linux下的clock skew detected

    今天在虚拟机上用GCC编译一个程序的时候,出现了下面的错误: make: warning: Clock skew detected. Your build may be incomplete 试了ma ...

  5. 玩耍Hibernate系列(一)补充--基础知识

    基本概述: Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使得java程序员可以随心所欲的使用对象编程思维来操纵数据库,Hibernate可以应用在任何 ...

  6. xml给提示

    1.     FAQ:不给提示: a)     window – preferences – myeclipse – xml – xml catalog b)     User Specified E ...

  7. js+CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. VIM 技巧 （一）全文统一添加

    大家应该有遇到过给整篇内容增加同样的东西的经历.例如给每行结尾增加分号.冒号等内容. 今天和大家分享下 关于此场景如何快速.高效的实现. 例如 Line one Line two Line three ...

  9. Vim 常用命令 一

    今天第一次学习了 Vim编辑器的一些使用  拿出来和大家分享下. 1.首先 列出 常用快捷键 u 表示 撤销上一步 x 表示 删除光标位内容 dd 表示 删除光标所在行内容 >G   表示 光标 ...

  10. Facebook

    Facebook登录为iOS Facebook的SDK为iOS提供了各种登录的经验,你的应用程序可以使用它来 ​​验证一个人.这份文件包括了所有你需要知道,以落实Facebook登录在你的iOS应用程 ...