父:
import React from 'react';
import "./assets/css/app.css";
import Header from './components/header';
import Input from './components/input';
class App extends React.Component {
constructor() {
super();
this.state={
text:""
};
}
getChildren(val){
console.log(val);
}
submitSave(){
alert("保存");
}
render() {
return (
<div className="App">
<Header isShow='true' sendParent={this.getChildren.bind(this)}
onClick={this.submitSave.bind(this)} ></Header>
<Input onChange={(e)=>{this.setState({text:e.target.value})}}/><br/>{this.state.text}
</div>
)
}
}
export default App;
HeaderComponent
import React,{Component} from 'react';
import PropTypes from 'prop-types';
class HeaderComponent extends Component{
render() {
return (
<div id="header" style={this.props.isShow?{display:'block'}:{display:'none'}}>
{this.props.title}
{/*<button type="button" onClick={this.changeTitle.bind(this)}>改变title</button>*/}
<button type="button" onClick={this.props.sendParent.bind(this,'我是子组件的值')}>给父组件传值</button>
<button type="button" onClick={this.props.onClick.bind(this)}>保存</button>
</div>
);
}
}
HeaderComponent.propTypes={
title:PropTypes.string.isRequired,
isShow:PropTypes.string.isRequired
}
HeaderComponent.defaultProps={
title:"默认导航"
}
export default HeaderComponent
InputComponent
import React,{Component} from 'react';
export default class InputComponent extends Component{
render() {
return (
<div >
<input type="text" onChange={this.props.onChange} />
</div>
);
}
}