react父子组件传值示例「建议收藏」
2023-06-13 09:11:33 时间
大家好,又见面了,我是你们的朋友全栈君。
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}/>*/}
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/145826.html原文链接:https://javaforall.cn
相关文章
- Vue之组件化(二)
- React 元素 VS 组件
- react 父子传值_react 父子组件传值 兄弟组件传值「建议收藏」
- react中类组件传值,函数组件传值:父子组件传值、非父子组件传值[通俗易懂]
- vue子组件给父组件传值
- Vue组件
- 基于react的简单轻便的开源图片预览组件
- React组件基础
- React 开发 | 父子组件间通信
- 你是如何使用React高阶组件的?
- 逐步拆解React组件—Lazyload懒加载
- 面试官:你是怎样进行react组件代码复用的
- Vue组件基础(上)
- 【React】学习笔记(二)——组件的生命周期、React脚手架使用
- Prometheus监控k8s集群组件
- React 组件基础
- React的组件通信方式
- React.js基础知识 函数组件和类组件(二)
- React-native组件库列表
- react源码分析:组件的创建和更新2
- React--3: 组件和模块及函数式组件
- React--9: 组件的三大核心属性2:props与构造器
- React--11: refs与事件处理非受控组件和受控组件
- react使用antd中Form内联组件与Form表单默认赋值
- SrpingCloud Tencent Polaris中的组件
- (四)处理组件进场和离场动画 <Transition />
- 细说React组件性能优化_2023-03-15
- OpenStack Swift组件介绍
- 【鸿蒙 HarmonyOS】UI 组件 ( 文本输入框 TextField 组件 )
- 【Flutter】Image 组件 ( 加载网络图片 | 加载静态图片 | 加载本地图片 | path_provider 插件 )
- 【错误记录】Visual Studio 2019 中运行 Unity C# 脚本时报错 ( 根据解决方案, 可能需要安装额外的组件才能获得 | .NET 桌面开发 | 使用 Unity 的游戏开发 )
- React 组件的常用生命周期函数汇总