react父子组件传值示例「建议收藏」

react父子组件传值示例「建议收藏」importReactfrom’react’;exportdefaultclassTextextendsReact.Component{//构造函数constructor(props){super(props);this.style={background:’#f00′,color:’#fff’};this.arr=[…

大家好,又见面了,我是你们的朋友全栈君。

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}/>*/}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/145826.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号