react子组件向父组件传递数据_react子组件改变父组件的状态

react子组件向父组件传递数据_react子组件改变父组件的状态本博客代码是React父组件和子组件相互传值的demo;实现封装一个折线图,折线图选择下拉框,获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图;效果图如下:父组件代码:代码解析:父组件Parent引用子组件Sub,传递了list组件给子组件,并且接收子组件传递给父组件的storeId;importReact,{Component}fro…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

本博客代码是 React 父组件和子组件相互传值的 demo;实现封装一个折线图,折线图选择下拉框,获取下拉框点击的值并且传给父组件根据下拉框筛选的条件更新视图;效果图如下:

react子组件向父组件传递数据_react子组件改变父组件的状态

父组件代码:

代码解析:父组件 Parent 引用子组件 Sub ,传递了 list 组件给子组件,并且接收子组件传递给父组件的 storeId ;

import React, { Component } from 'react';
import Sub from './components/Sub';

class Parent extends Component {
  state = {
    list:[{'storeId':1,'name':'li'},{'storeId':2,'name':'jay'}],
  };

  storeId=(value)=> {
    console.log('子组件传递给父组件的值',value)
  }
  render() {
    return (
      <div>
        {this.state.list?
        (
        <Sub 
            storeId={this.storeId} 
            list={this.state.list} 
        />
        ):null}
      </div>
    );
  }
}

export default Parent;
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/197164.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • element ui select 踩坑

    element ui select 踩坑

    2021年6月9日
    172
  • java的动态代理机制详解_java为什么是静态语言

    java的动态代理机制详解_java为什么是静态语言说起java动态代理,在我刚开始学java时对这项技术也是十分困惑,明明可以直接调通的对象方法为什么还要使用动态代理?随着学习的不断深入和工作经验的积累,慢慢的体会并理解了java动态代理机制。昨天再给公司新同事做技术培训时有同学就对动态代理产生了疑问,我这里梳理一遍一并记录一下,方便大家查看对自己也是加深记忆。(1)什么是代理?大道理上讲代理是一种软件设计模式,目的地希望能做到代码重用。具体上讲…

    2022年10月9日
    3
  • ADO.net中常用的对象介绍

    ADO.NET的对象主要包括:DataSet,DataTable,DataColumn,DataRow,和DataRelation。DataSet:这个对象是一个集合对象,它可以包含任意数量的数据表

    2021年12月20日
    45
  • 实时数据库简介和比较—PI

    实时数据库简介和比较—PI实时数据库是数据库系统发展的一个分支,它适用于处理不断更新的快速变化的数据及具有时间限制的事务处理。实时数据库技术是实时系统和数据库技术相结合的产物,实时数据库系统的主要内容包括:实时数据库模型;

    2022年8月3日
    39
  • pandas 读取excel文件

    pandas 读取excel文件pandas读取excel文件一read_excel()的基本用法二read_excel()的常用的参数:三示例1.IO:路径2.sheet_name:指定工作表名3.header:指定标题行4.names:指定列名5.index_col:指定列索引6.skiprows:跳过指定行数的数据7.skipfooter:省略从尾部的行数据8.dtype指定某些列的数据类型pandas读取excel文件使用的是read_excel方法。本文将详细解析read_excel方法

    2025年8月10日
    2
  • C语言实现读取文件的简单代码「建议收藏」

    C语言实现读取文件的简单代码「建议收藏」一、写文件#include<stdio.h>#include<stdlib.h>#include<string.h>#include<errno.h>intmain(){ printf(“File:%s\n”,__FILE__); printf(“Date:%s\n”,__DATE__); printf(“…

    2022年5月20日
    218

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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