父组件:
~~~
var React = require('react');
import {render} from 'react-dom';
import {Router, Route, Link} from 'react-router';
import '../style/index.css';
import '../js/rem.js';
import Headnav from './indexComponents/headnav.jsx';
import Content from './indexComponents/content.jsx';
import Footer from './indexComponents/footer.jsx';
var Index = React.createClass({
getInitialState: function () {
return {checked: '1xx1'};
},
handleGet: function(val){
this.setState({test: val});
},
render: function () {
return (
<div className="main">
<Headnav />
<div>所传的值：{this.state.test}</div>
<Content handleValue={this.handleGet.bind(this)} checked={this.state.checked}/>
<Footer />
</div>
);
}
});
module.exports = Index;
~~~
子组件:
~~~
var React = require('react');
import {render} from 'react-dom';
import {Router, Route, Link} from 'react-router';
var Content = React.createClass({
getInitialState: function () {
return {
testVal: 'Hello Runoob!',
parentVal:this.props.checked,
};
},
handAttribute:function(){
this.props.handleValue(this.state.testVal);
},
render: function () {
var parentVal = this.state.parentVal;
return (
<div className="content">
this is content
<input onChange={this.handAttribute}/>
<br/>
parent's value is {parentVal}
</div>
);
}
});
module.exports = Content;
~~~
路线图:
