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)


相关推荐

  • mysql基本操作_MySQL创建数据库表

    mysql基本操作_MySQL创建数据库表1、数据库简单来说,所谓的数据库就是存储数据的容器,而且是永久存储的。2、为什么需要数据库3、为什么要学习MySQL数据库最早MySQL数据,瑞典AB公司开发的一款开源型的关系型数据库。随着时间的推移,瑞典AB公司把MySQL数据库转让给Sun公司(Java语言的创始公司)后来,Sun公司经营不善,又把MySQL数据库转让给甲骨文公司(Oracle数据库)4、数

  • pycharm更改整体背景颜色(黑-白)[通俗易懂]

    pycharm更改整体背景颜色(黑-白)[通俗易懂]pycharm更改整体背景颜色(黑-白)打开pycharm:1、左上角File—-Settings2、Appearance&Behavior—-Appearance—-第一栏:Theme选择想要的背景色(白色IntelliJLight黑色Darcula黑亮Highcontrast)—-右下角OK…

  • c++文件读写操作

    c++文件读写操作近期适配几款游戏的数据,因为重复量太大,因此写一个对数据进行处理的程序,下面是整个过程中接触到的一些东西。以下内容转载自:https://www.cnblogs.com/1242118789lr/p/6885691.html。fstream提供了三个类,用来实现c++对文件的操作(文件的创建、读、写)     ifstream –从已有的文件读入    ofstream — 向…

  • matlab空间计量AIC准则,关于AIC准则

    matlab空间计量AIC准则,关于AIC准则AIC准则提出背景计量经济学研究对象:量化的社会经济问题研究目的:利用已有信息,通过模型发现内在机理,并对未知信息作出统计推断核心问题:保证模型反映数据所代表的主要信息,降低噪声干扰项的影响,保证模型的预测准确性模型包含的信息量能否尽可能大?不能。一是干扰信息无法避免;二是若模型包含了全部信息,则模型的复杂度也会相应提高,相应地会提高经济学成本;三是人无法对模型的准确性做出客观而科学的评断。信息论…

  • 编程体系结构(09):分布式系统架构

    编程体系结构(09):分布式系统架构

    2020年11月20日
  • php json字符串转json对象_PHP字符串函数

    php json字符串转json对象_PHP字符串函数怎么把php字符串转为json发布时间:2020-07-2214:05:08来源:亿速云阅读:162作者:Leah这期内容当中小编将会给大家带来有关怎么把php字符串转为json,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。php把字符串转为json的方法:首先定义一个数组,调用json_encode方法将数组编码为json格式的字符串;然后添加参数“true…

    2022年10月30日

发表回复

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

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