美文网首页技术研发
react子组件、父组件相互传值

react子组件、父组件相互传值

作者: gzxwnt | 来源:发表于2018-12-12 23:02 被阅读0次

子组件传图片路径imgUrl值给父组件,父组件传imgaddr值给子组件
子组件:

export default class Son extends React.Component {
//获取父组件传过来的imgaddr值
    constructor(props) {
        super(props);
        this.state = {
            imgaddr:props.imgaddr,
        };}

//通过回调函数传值给父组件
    onSuccess=(res, dataUrl)=> {
        this.refs.targetViewer.src = dataUrl;
        this.props.getImg(res.data.imgurl);
    };
  
//通过this.props.imgaddr绑定父组件传过来的值
    render() {
        return (
                <div>
                    <img
                        src={this.props.imgaddr}
                    />
                </div>
    }
}

父组件:

export default class Father extends Component {

 constructor(props) {
    super(props);
    this.state = {
        imgurl:'',
    };}

//通过getImg方法取到子组件传过来的imgurl值
  getImg = (imgurl) => {
      this.setState({
          imgurl:imgurl
      });
  };

//父组件通过record传imgaddr值给子组件
render: (value, index, record) => {
          return (
              <EditDialog
                record={record}
              />
          );
        },

//在组件CropUploadImage中绑定imgurl值
<CropUploadImage
           getImg={this.getImg}
  />
  }

相关文章

  • 3.组件传值 - service传值

    angular 组件service传值 父子组件相互传值 子组件如果想返回去传值给父组件,父子组件相互传值需要使用...

  • angular组件之间的传值

    父子组件传值 父组件给子组件传值通过属性绑定的方式 子组件通过发送是事件给父组件传值 兄弟组件相互传值 兄弟组件通...

  • vue中父组件获取子组件的值

    vue项目中,普遍存在父组件和子组件相互传值的问题,父组件向子组件传值用props,但是如果此时要修改父组件传的值...

  • react子组件向父组件传值

    相关资料:react 父组件怎么获取子组件的这个值React组件间信息传递方式react同级组件之间传值 • 父...

  • Vue.js 父子组件传值 . 兄弟组件传值

    概述 vue中组件之间的传值传值情况主要有以下三种 父组件向子组件传值子组件向父组件传值兄弟组件之间相互传值或者是...

  • react组件传值的几种方式

    react 组件传值一、父组件传给子组件父组件通过props传递给子组件; 二、子组件传给父组件父组件通过prop...

  • react-父子组件间通信

    React-父子组件间通信 父组件传 值 给子组件, 传 方法 给子组件 子组件接收 值 ,触发父组件的 方法

  • vue、react对比

    一、父子通信 1. 父组件通过props向子组件传值 vue:父组件 子组件接收 react:父组件: 子组件: ...

  • react-native 父子组件之间传值

    1.父组件传值给子组件 父组件给子组件传值 react 和vue都是很相似的 , 很简单 1.父组件引入子组件im...

  • react子组件、父组件相互传值

    子组件传图片路径imgUrl值给父组件,父组件传imgaddr值给子组件子组件: 父组件:

网友评论

    本文标题:react子组件、父组件相互传值

    本文链接:https://www.haomeiwen.com/subject/nulmhqtx.html