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

全栈程序员-站长 • 2022年5月16日下午2:20 • 未分类 • 阅读 36

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

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}/>*/}