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

import React from 'react';
import ReactDOM from 'react-dom'; export default class App extends React.Component{
constructor(){
super();
this.state = {
red: 0,
green: 0,
}
}
update(){
this.setState({
red: ReactDOM.findDOMNode(this.refs.red.refs.inp).value,
green: ReactDOM.findDOMNode(this.refs.green.refs.inp).value,
})
}
render(){
return(
<div>
<NumInput
ref="red"
type="range"
min={0}
max={255}
step={1}
val={+this.state.red}
label="Red"
update={this.update.bind(this)}
></NumInput>
<NumInput
ref="green"
type="number"
step={0.01}
val={+this.state.green}
label="Green"
update={this.update.bind(this)}
></NumInput>
</div>
);
}
} class NumInput extends React.Component{
constructor(){
super();
}
render() {
const label = this.props.label ?
<label>{this.props.label} - {this.props.val}</label> :
'';
return (
<div>
<input
type={this.props.type}
min={this.props.min}
max={this.props.max}
step={this.props.step}
defaultValue={this.props.val}
onChange={this.props.update}
ref="inp"
/>
{label}
</div>
);
}
} NumInput.propTypes = {
type: React.PropTypes.oneOf(['range', 'number']),
min: React.PropTypes.number,
max: React.PropTypes.number,
step: React.PropTypes.number,
val: React.PropTypes.number,
label: React.PropTypes.string,
update: React.PropTypes.func.isRequired,
}; NumInput.defaultProps = {
type: 'range',
min: 0,
max: 255,
step: 1,
val: 0,
label: ''
};

[React Fundamentals] Composable Components的更多相关文章

  1. [React] React Fundamentals: Integrating Components with D3 and AngularJS

    Since React is only interested in the V (view) of MVC, it plays well with other toolkits and framewo ...

  2. 【转】Facebook React 和 Web Components(Polymer)对比优势和劣势

    原文转自:http://segmentfault.com/blog/nightire/1190000000753400 译者前言 这是一篇来自 StackOverflow 的问答,提问的人认为 Rea ...

  3. Facebook React 和 Web Components(Polymer)对比优势和劣势

    目录结构 译者前言 Native vs. Compiled 原生语言对决预编译语言 Internal vs. External DSLs 内部与外部 DSLs 的对决 Types of DSLs - ...

  4. [React Fundamentals] Using Refs to Access Components

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

  5. [React] React Fundamentals: Using Refs to Access Components

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

  6. [React] 09 - Tutorial: components

    jsx变为js的过程:http://babeljs.io/repl/ youtube: https://www.youtube.com/channel/UCA-Jkgr40A9kl5vsIqg-BIg ...

  7. [React Fundamentals] Component Lifecycle - Updating

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

  8. [React Fundamentals] Component Lifecycle - Mounting Basics

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

  9. [React Fundamentals] Accessing Child Properties

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

随机推荐

  1. Codeforces 364A - Matrix

    原题地址:http://codeforces.com/problemset/problem/364/A 题目大意: 给定一个数字a(0 ≤ a ≤ 109)和一个数列s(每个数都是一位,长度不超过40 ...

  2. 根据block取出space_id

    /*********************************************************************//** Gets the space id of a bl ...

  3. 深入理解Java虚拟机 - 垃圾收集概述

    首先需要澄清的是,垃圾收集(GC)的历史远比Java要久远,当我们意识到手动管理内存所带来的麻烦时,懒惰的天性推动先驱们寻找更为简单.易用.关键是傻瓜式的内存管理技术.GC技术起源于1960年诞生于M ...

  4. c语言之extern关键字

    1.定义 extern,外面的.外来的意思.那它有什么作用呢?举个例子:假设你在大街上看到一个黑皮肤绿眼睛红头发的美女(外星人?)或者帅哥.你的第一反应就是这人不是国产的. extern就相当于他们的 ...

  5. POJ 1258 Agri-Net

    题意:给一个无向图的邻接矩阵,求最小生成树. 解法:Kruskal算法.把边按边权排序,从小到大插入生成树中,如果一个边的两个点都在生成树中则不插入,用并查集维护. 代码: #include<s ...

  6. Kryo 为什么比 Hessian 快

    Kryo 是一个快速高效的Java对象图形序列化框架,它原生支持java,且在java的序列化上甚至优于google著名的序列化框架protobuf.由于 protobuf需要编写Schema文件(. ...

  7. [BILL WEI]SQL 存储过程学习

    --查看数据库exec sp_databases ;--查看表exec sp_tables ;--查看列exec sp_columns WMS_ASN;--查看索引exec sp_helpindex ...

  8. PHP 进行蜘蛛访问日志统计

    $useragent = addslashes(strtolower($_SERVER['HTTP_USER_AGENT'])); if (strpos($useragent, 'googlebot' ...

  9. SRM 596 DIV 2

    前段时间终于配置好了TopCoder的环境,所以就拿这场的DIV2练习了一下 1. 250pt FoxAndSightseeing 题意 给你n个城市的位置,他们在同一直线上,要求你跳过其中某一个城市 ...

  10. ActivityNotFoundException: No Activity found to handle Intent

    代码如下: Intent intent = new Intent(); intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); intent.setAction ...