index.js(入口文件)
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App' ;
ReactDOM. render ( < App / > , document. getElementById ( 'root' ) ) ;
“爸爸”App.js
import React, { Component } from 'react' ;
import Footer from './Footer'
export default class App extends Component {
constructor ( ) {
super ( )
this . state = {
val: '' ,
sonValue: ''
}
}
handleInput ( e) {
this . setState ( {
val: e. target. value
} )
console. log ( this . state)
}
sendToSon ( val) {
this . setState ( {
sonValue: val
} )
}
render ( ) {
return (
< div>
< h2> 这是爸爸App. js< / h2>
< div>
< input value= { this . state. val} onChange= { this . handleInput. bind ( this ) } / >
< / div>
< div>
接收儿子的数据:{ this . state. sonValue}
< / div>
< hr / >
{ }
< Footer text= { this . sendToSon. bind ( this ) } / >
< / div>
)
}
}
"儿子"Footer.js
import React, { Component } from 'react' ;
export default class Header extends Component {
constructor ( ) {
super ( )
this . state = {
val: ''
}
}
handleClick ( ) {
this . props. text ( this . state. val)
}
render ( ) {
return (
< div>
< h2> 这是儿子Footer. js< / h2>
< div>
< input value= { this . state. val} onChange= { ( e) => {
this . setState ( { val: e. target. value } )
} } / >
{ }
< button onClick= { this . handleClick. bind ( this ) } > 触发< / button>
< / div>
< / div>
)
}
}