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}/>*/}
相关文章推荐
- react 父子组件传值
- React(1) 关于创建React项目及 基础语法 和React父子组件传值概要 State和Props介绍 this指向
- React native从入门到深入 ---页面传值,父子组件传值
- react.js 父子组件数据绑定实时通讯的示例代码
- React Native悬浮按钮组件的示例代码
- react 父组件传值到子组建
- Vue中的父子组件传值从父组件控制子组件的显示
- vue 中 父子组件传值 子父组件传值 非父子组件传值
- vue实现父子组件之间的通信以及兄弟组件的通信功能示例
- React 组件基本使用(3) ---父子组件之间的通信
- React 子组件向父组件传值
- vue父子组件之间传值
- vue父子组件中传值
- react native中有关日期的组件DatePicker 示例
- React(3)变量使用、变量更新、父子组件变量传递
- vue/组件嵌套/无限嵌套/嵌套组件消息传递/嵌套父子组件传值
- React 组件渲染和更新的实现代码示例
- react 父子组件之间通讯props
- javascript 父子窗口传值示例代码
- React中父子组件间的通信问题