<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>菜鸟教程 React 实例</title>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
<script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
<script src="http://static.runoob.com/assets/react/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage=React.createClass({
getInitialState:function(){
return {value:'TTTK'};
},
handleChange:function(event){
this.setState({value:event.target.value});
},
render:function(){
var value=this.state.value;
return(
<div>
<Content myDataProp={value} updateStateProp={this.handleChange}></Content>
</div>
);
},
});
var Content=React.createClass({
render:function(){
return(
<div>
<input type="text" value={this.props.myDataProp} onChange={this.props.updateStateProp}/>
<h4>{this.props.myDataProp}</h4>
</div>
);
},
});
ReactDOM.render(
<HelloMessage/>,
document.getElementById("example")
);
</script>
</body>
</html>
react.js小案例（input框值变，对应变）