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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • Ubuntu命令行下树莓派连接WiFi操作方法

    Ubuntu命令行下树莓派连接WiFi操作方法第一种方法:通过配置/etc/network/interfaces文件实现终端输入sudovim/etc/network/interfaces修改后文件内容如下:autoloifaceloinetloopbackifaceeth0inetdhcpautowlan0allow-hotplugwlan0ifacewlan0inetdhcpwpa-ssid”你的wifi名称”wpa-p

    2022年6月10日
    66
  • java删除数组中指定元素_java学习中如何删除数组中的指定元素「建议收藏」

    java删除数组中指定元素_java学习中如何删除数组中的指定元素「建议收藏」java的api中,并没有提供删除数组中元素的方法。虽然数组是一个对象,不过并没有提供add()remove()或查找元素的方法。这就是为什么类似ArrayList和HashSet受欢迎的原因。不过,我们要感谢ApacheCommonsUtils,我们可以使用这个库的ArrayUtils类来轻易的删除数组中的元素。不过有一点需要注意,数组是在大小是固定的,这意味这我们删除元素后,并不会减少数组的…

    2022年8月11日
    11
  • TreeMap数据结构之排序二叉树

    TreeMap数据结构之排序二叉树一.排序二叉树排序二叉树是一种特殊结构的二叉树,可以非常方便地对树中所有节点进行排序和检索。排序二叉树要么是一棵空二叉树,要么是具有下列性质的二叉树:若它的左子树不空,则左子树上所有节点的值均小于它的根节点的值。若它的右子树不空,则右子树上所有节点的值均大于它的根节点的值。二.排序二叉树添加节点    以根节点当前节点开始搜索,拿被

    2022年7月25日
    11
  • html初识

    web服务的本质importsocketdefmain():sock=socket.socket(socket.AF_INET,sock.SOCK_STREAM)sock.blind((&

    2022年3月29日
    80
  • html网页中加入音乐播放器,[HTML5]简单网页本地音乐播放器[通俗易懂]

    html网页中加入音乐播放器,[HTML5]简单网页本地音乐播放器[通俗易懂]既然HTML5提出与本地交互方便,就想写个HTML5的本地音乐播放器。一开始问题主要集中在怎么读取本地文件路径,我想肯定可以用JS实现去操作本地文件(因为node.js很容易实现读取本地文件,但是原生JS怎么写不太清楚),不过简单一点就用这样只能读取一个,我想做的是最好是把一个文件夹中的都取出来,然后参考http://sapphion.com/2011/11/html5-folder-upload…

    2022年6月21日
    23
  • pycharm中unresolvedreference_pycharm add new configuration

    pycharm中unresolvedreference_pycharm add new configuration在用Pycharm写项目的时候的时候碰到一个很无语的问题路径明明没有问题,运行也没有出错,但就是爆红,逼死强迫症啊。。。多方查找最后解决了。步骤如下:File–>Settings–>ProjectStructure–>找到问题目录–>Sources–>Apply–>OKOK了,不在爆红…

    2022年8月26日
    5

发表回复

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

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