父组件向子组件传值（通过props传值）
子组件:
class Children extends Component{
constructor(props){
super(props);
}
render(){
return(
<div>这是：{this.props.name}</div> // 这是 父向子
)
}
}
父组件:
class App extends React.Component{
render(){
return(
<div>
<Children name="父向子"/>
</div>
)
}
}
父组件向子组件传值（回调函数）
子组件:
class Children extends Component{
constructor(props){
super(props);
}
handerClick(){
this.props.changeColor('skyblue') // 执行父组件的changeColor 并传参 必须和父组件中的函数一模一样
}
render(){
return(
<div>
<div>父组件的背景色{this.props.bgcolor}</div> // 子组件接收父组件传过来的值 bgcolor
<button onClick={(e)=>{this.handerClick(e)}}>改变父组件背景</button> // 子组件执行函数
</div>
)
}
}
父组件:
class Father extends Component{
constructor(props){
super(props)
this.state = {
bgcolor:'pink'
}
}
bgChange(color){
this.setState({
bgcolor:color
})
}
render(props){
<div style={{background:this.state.bgcolor}}>
// 给子组件传递的值 color
<Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} />
// changeColor 子组件的参数=color 当做形参
</div>
}
}
子组件向父组件传值
子组件:
handleVal函数处理用户输入的字符，再传给父组件的handelEmail函数
var Child = React.createClass({
handleVal: function() {
var val = this.refs.emailDom.value;
val = val.replace(/[^0-9|a-z|\@|\.]/ig,"");
this.props.handleEmail(val);
},
render: function(){
return (
<div>
请输入邮箱：<input ref="emailDom" onChange={this.handleVal}/>
</div>
)
}
});
父组件:
通过handleEmail接受到的参数，即子组件的值
var Parent = React.createClass({
getInitialState: function(){
return {
email: ''
}
},
handleEmail: function(val){
this.setState({email: val});
},
render: function(){
return (
<div>
<div>用户邮箱：{this.state.email}</div>
<Child name="email" handleEmail={this.handleEmail.bind(this)}/>
</div>
)
}
});
React.render(
<Parent />,
document.getElementById('test')
);
原文章:
