代码实例;

<!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. react第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参)

    第六单元(react组件通信-父子组件通信-子父组件通信-跨级组件的传参方式-context方式的传参) #课程目标 1.梳理react组件之间的关系 2.掌握父子传值的方法 3.掌握子父传值的方法 ...

  2. React 组件间通讯

    React 组件间通讯 说 React 组件间通讯之前,我们先来讨论一下 React 组件究竟有多少种层级间的关系.假设我们开发的项目是一个纯 React 的项目,那我们项目应该有如下类似的关系: 父 ...

  3. 5. React 组件的协同使用 组件嵌套和Mixin

            组件是React的核心,构建大型项目时多个组件之间需要进行协同使用.可以从横向和纵向两个角度来实现组件的协同使用,纵向的协同使用就是组件嵌套,横向的协同使用就是Mixin(抽取公共方法 ...

  4. Vue_(组件通讯)父子组件简单关系

    Vue组件 传送门 在Vue的组件内也可以定义组件,这种关系成为父子组件的关系 如果在一个Vue实例中定义了component-a,然后在component-a中定义了component-b,那他们的 ...

  5. React入门---组件嵌套-5

    组件嵌套 我们现在需要组件嵌套,所以要创建其他组件,目前有一个头部组件,在./components/header.js; 接下来在components文件中创建:底部组件footer.js 和主体组件 ...

  6. Vue 组件&组件之间的通信 之 非父子关系组件之间的通信

    Vue中不同的组件,即使不存在父子关系也可以相互通信,我们称为非父子关系通信: 我们需要借助一个空Vue实例,在不同的组件中,使用相同的Vue实例来发送/监听事件,达到数据通信的目的: 实例: 初始加 ...

  7. vue-自主研发非父子关系组件之间通信的问题

    相信很多人都知道解决组件间通信:vuex,今天的主角不是它. element-ui里解决组件间通信的思路:emitter.js ,但是如果你拿来你会发现它解决的是父子组件之间的通信问题.如果我们通信的 ...

  8. React 组件协同关系

    组件协同的两种方法,1种是纵向的协同,就是组件嵌套,重点在于代码的封装,2种是横向协同也就是Mixin,组件抽离,重点在于代码复用 1.组件嵌套,父组件通过属性向子组件,子组件可以通过事件处理函数以委 ...

  9. RXJS组件间超越父子关系的相互通信

    RXJS组件间超越父子关系的相互通信 用到这个的需求是这样的: 组件A有数据变化,将变化的数据流通知组件B接收这个数据流并做相应的变化 实例化RXJS的subject对象 import { Injec ...

随机推荐

  1. STM32 通用定时器好文章收藏

    https://blog.csdn.net/fengshuiyue/article/details/79150724 单片机入门学习十三 STM32单片机学习十 通用定时器 里面写的挺不错,图文并茂, ...

  2. firewall&iptables

    一.firewall 查看firewall状态 firewall-cmd --state 如果firewall为关闭状态,先启动firewall systemctl start firewalld 添 ...

  3. js 事件对象event

    在触发DOM上的某个事件时,会产生一个事件对象event.这个对象中包含着所有与事件有关的信息.包括导致事件的元素,事件的类型以及其他与特定事件相关的信息. <body> <a hr ...

  4. web前端到底怎么学？

    互联网+的火爆,让互联网行业快速的扩张.越来越多的人想通过学习的途径进入这个行业,java开发.WEB前端开发.UI设计等专业受到大众追捧.小编这次主要介绍一下WEB前端开发,为想要学习web前端开发 ...

  5. BZOJ 4883 棋盘上的守卫 解题报告

    BZOJ4883 棋盘上的守卫 考虑费用流,但是数据范围太大 考虑 \(i\) 行 \(j\) 列如果被选择,那么要么给 \(i\) 行,要么给 \(j\) 列 把选择 \(i\) 行 \(j\) 列 ...

  6. Invalid bound statement (not found)错误

    都对着,为什么会报这个错呢,mapper也拿到了,为什么查询时出错呢,最后看target里编译的文件发现少了mapping,xml没编译过去. 我的目录结构:dao层都编译过去了,但mapper.xm ...

  7. 【HDOJ6579】Operation（线性基）

    题意:给定一个数列a,给定两种操作: 1.询问[l,r]区间内最大的xor和 2.n++,a[n]赋值为x 要求强制在线 n,m<=5e5,a[i]<2^30 思路:同CF1100F 固定 ...

  8. 10.15 sed 命令实践

    在n行前插入 [root@wen data]# sed '2i 106,dandan,CSO' person.txt101,oldboy,CEO106,dandan,CSO102,zhangyao,C ...

  9. python练习题自己实现一个字符串的find函数

    # 第五题:自己实现一个字符串的find函数 # 1.在一个字符串中查找另一个字符串 # 2.找到了返回第一次出现的位置 # 3.没找到返回-1 # 4.参数s1为源字符串,参数s2为要查找的字符串 ...

  10. 累加器A与ACC区别

    累加器写成A或ACC在51汇编语言指令中是有区别的. ACC在汇编后的机器码必有一个字节的操作数,即累加器的字节地址E0H,A在汇编后则隐含在指令操作码中.所以在指令中A不能用ACC来替代,而对A的特 ...