您的位置:首页 > Web前端 > React

react父子组件传值示例

2019-05-16 17:58 447 查看
版权声明: https://blog.csdn.net/qq_42765966/article/details/90268891
import React from 'react';
export default class Text extends React.Component{
// 构造函数
constructor(props){
super(props);
this.style = {background:'#f00',color:'#fff'};
this.arr = [
{"name":"zhang","age":34},
{"name":"li","age":35},
{"name":"wang","age":14},
{"name":"zhao","age":24}
];
this.state = {
num:0,
b:'2hdlfghsoahf'
}

}
a=1;
addList(){
// 通过循环生成dom
return this.arr.map((v,i)=>{
return (
// ref 获取真实dom,需要render之后才能获取到
<li ref={'li'+i} onClick={this.handle.bind(this,i)} key={i}>
<span>{v.name}</span>
<span>{v.age}</span>
</li>
)
})
}
handle(e){

}
change(){
this.setState({
num:9
})
}
// 渲染
render(){
return(
<div ref={'box'} style={{zIndex:9999999,...this.style,position:'absolute',left:this.props.left||0,top:this.props.top||'0px',fontSize:'40px',width:'100px',height:'100px'}}>
{/*事件名称小驼峰*/}
<p onClick={this.change.bind(this)}>{this.state.num}</p>
{
this.addList()
}
<input style={{position:'absolute',zIndex:999999999999999}} type="text" ref={'input'}/>
<button onClick={this.tarnsform.bind(this)}>请点击</button>
</div>
)
}

tarnsform(){
this.props.onSubmit(this.refs.input.value);
}

componentWillMount(){
// 组件初始化时候执行
// 组件即将加载
}

componentDidMount(){
// ajax
// 组件初始化时候执行
// 组件加载完成
console.log(this.refs.box);
}
componentWillUpdate(){
// 二次渲染时候执行
// 组件即将更新
}
componentDidUpdate(){
// 二次渲染时候执行
// 组件更新完成
}
componentWillUnmount(){
// 组件即将卸载
// 清掉定时器等  内存释放
}
}

//------------------------------------------------------------------
//   <Test/>
{/*<Test onSubmit={this._click.bind(this)} data={'fdajgofa'} left={'800px'} top={500}/>*/}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: