The owner-ownee relationship is used to designate a parent-child relationship with React components as it differs from the DOM relationship.

import React from 'react';

export default class App extends React.Component {
constructor(){
super(); //This is going to give us our context for this within our component
this.update = this.update.bind(this);
this.state = {
txt: 'State',
count: 1
}
}
update(e){
this.setState({
txt: e.target.value
})
}
render() {
return (
<div>
<Widget txt={this.state.txt} update={this.update}></Widget>
<Widget txt={this.state.txt} update={this.update}></Widget>
</div> )
}
} // "Widget" must be capitalized
const Widget = (props) => {
return (
<div>
<input type="text" onChange={props.update} />
<span>Hello {props.txt}</span>
</div>
)
}

[React Fundamentals] Owner Ownee Relationship的更多相关文章

  1. [React] React Fundamentals: Owner Ownee Relationship

    The owner-ownee relationship is used to designate a parent-child relationship with React components ...

  2. [React] React Fundamentals: Accessing Child Properties

    When you're building your React components, you'll probably want to access child properties of the m ...

  3. [React Fundamentals] Composable Components

    To make more composable React components, you can define common APIs for similar component types. im ...

  4. [React Fundamentals] Component Lifecycle - Updating

    The React component lifecycle will allow you to update your components at runtime. This lesson will ...

  5. [React Fundamentals] Component Lifecycle - Mounting Usage

    The previous lesson introduced the React component lifecycle mounting and unmounting. In this lesson ...

  6. [React Fundamentals] Component Lifecycle - Mounting Basics

    React components have a lifecycle, and you are able to access specific phases of that lifecycle. Thi ...

  7. [React Fundamentals] Using Refs to Access Components

    When you are using React components you need to be able to access specific references to individual ...

  8. [React Fundamentals] Accessing Child Properties

    When you're building your React components, you'll probably want to access child properties of the m ...

  9. [React Fundamentals] State Basics

    State is used for properties on a component that will change, versus static properties that are pass ...

随机推荐

  1. 在Silverlight中的DispatcherTimer的Tick中使用基于事件的异步请求

    需求:在silverlight用户界面上使用计时器定时刷新数据. 在 Silverlight 中的 DispatcherTimer 的 Tick 事件 中使用异步请求数据时,会出现多次请求的问题,以下 ...

  2. javascript 一些需要知道的东西

    这里我直接贴出代码,注释已经补全,欢迎指正: <script type="text/javascript"> /** 1,js中一切皆是对象,函数也是, 2,当定义变量 ...

  3. 一致性hash算法 - consistent hashing

    consistent hashing 算法早在 1997 年就在论文 Consistent hashing and random trees 中被提出,目前在 cache 系统中应用越来越广泛: 1 ...

  4. 分布式存储Memcache替代Session方案

    PHP自带的Session实际是在服务器中为每个客户建立独立的文件存放各自的信息. 在不做处理的情况下,很容易被客户端伪造.并且由于采用文件形式,所以存在着IO 读写的瓶颈.一般当用户在线达到1000 ...

  5. 彩色网页变黑白色CSS代码变黑白色调!

    <style> html { -webkit-filter: grayscale(%); -moz-filter: grayscale(%); -ms-filter: grayscale( ...

  6. SharePoint 2010 master page 控件介绍(3) :页面主体内容

    转:http://blog.csdn.net/lgm97/article/details/6409217 <!-- =====  页面滚动区域开始  ====================== ...

  7. Go 学习笔记(一)

    随着Go的应用越来越火热,自己也终于开始学习了.平时经常用C,看着Go还是比较亲切的.好了,开始. 今天主要是按照书上的内容自己简单的实践了下最基本的输出,以及网页功能,上代码: package ma ...

  8. NOIP2007 字符串展开

    .字符串的展开 (expand.pas/c/cpp) [问题描述] 在初赛普及组的“阅读程序写结果”的问题中,我们曾给出一个字符串展开的例子:如果在输入的字符串中,含有类似于“d-h”或“4-8”的子 ...

  9. java日志,(commons-loging 、log4j 、slf4j 、LogBack介绍)

    如果对于commons-loging .log4j .slf4j .LogBack 等都已经非常清楚了,可以忽略本文.几次解决日志冲突问题时对这几个概念的简单总结,希望对这块基础没有理解透的同学能有所 ...

  10. SQL2008--SQL语句-存储过程-触发器-事务处理-基本语法-函数

    环境 SQL2008 1.存储过程建立 库-可编程性-存储过程-右击“存储过程”-点击“新建存储过程” SET ANSI_NULLS ONGOSET QUOTED_IDENTIFIER ONGOCRE ...