react子组件向父组件传值
思想: 子组件往父组件传值,父组件中定义一个函数,在子组件中触发,触发的时候子组件把需要传递的数据当作参数传递过去,即可
1、父组件提供一个回调函数(其参数用于接受数据)
2、将函数作为属性的值,利用props,传递给子组件
3、子组件通过props获取到父组件传递过来的函数,并且地调用这个函数。
4、将子组件中想要传递给父组件的数据,作为参数传递给这个函数。
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';let root = document.getElementById('root')class Parent1 extends React.Component {state = {tet: ""}getChildMsg = msg => {this.setState({tet: msg})}render() {return (<div className="parent">父组件:{this.state.tet}<Child1 handle={this.getChildMsg} /></div>)};
}
class Child1 extends React.Component {state = {num: ""}handleChild = () => {this.props.handle(565656)};render() {return (<div><button onClick={this.handleChild}>点击子组件</button></div>)};
}ReactDOM.render(<Parent1 />,root)
react子组件向父组件传值相关推荐
- react 子传参父_React 子组件给父组件传值、整个组件、方法
一.准备工作 1.定义一个父组件,名字为Parent /src/component/Parent.js import React, {Component} from 'react' export de ...
- react 子传参父_React 子组件向父组件传值的方法
本文介绍了React 子组件向父组件传值的方法,分享给大家 子组件需要控制自己的 state, 然后告诉父组件自己的state,通过props调用父组件中用来控制state的函数,在父组件中展示子组件 ...
- react基础之--子组件向父组件传值
在父组件中定义一个函数,该函数用于处理传递过来得值(比如用于修改父组件中state得数据) 在子组件调用部分通过属性绑定得形式绑定该函数(在子组件中就可以通过this.props.属性名就可以拿到该函 ...
- 【react】子组件向父组件传值
相信已经接触react的同学们,对父子间传值已经不陌生了,但是相对来说,父组件向子组件传值很简单,直接在 子组件的标签上传过去,再从子组件的props上结构出来就ok了,但是很多同学还是理解不了如何由 ...
- 父html向子html传递参数,子组件向父组件传值
react 子组件怎么向父组件传值 Vue中子组件给父组件传值,父组件接收不到 vue组件在html声明的事件尽量不要用大写的哈,会被解析成小写的,因为html属性是大小写不敏感的 另外调用的函数要生 ...
- react函数子组件向父组件传值
在 react中父组件向子组件传值使用的props 子组件向父组件传值怎么传呢 可以使用useRef useRef是一个方法,且useRef返回一个可变的ref对象 initialValue被赋值给其 ...
- 019_Vue子组件向父组件传值
1. 父组件向子组件传递信息 1.1. props传递数据原则: 单向数据流. 1.2. 子组件通过自定义事件向父组件传递信息 <button @click='$emit("enlar ...
- 组件间数据交互——父组件向子组件传值( props属性值类型) 子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
- vue2.0 子组件和父组件之间的传值
Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子父组件通信的问题 首先我们先搭好开发环境,我们首先得装好git和npm这两个工具(如果有不清楚的同学 ...
最新文章
- 【硬件基础】有源蜂鸣器与无源蜂鸣器
- window.open的用法---javascript学习笔记
- UIButton下面添加滑动的线
- git cherry-pick 把提交到A分支的部分commit 再提交到B分支上
- ZOJ 2849 Attack of Panda Virus (优先队列 priority_queue)
- DJANGO_SETTINGS_MODULE is undefined报错的解决
- pycharm 使用教程
- java thread signal_java — Thread之CountDownLatch的使用
- 欧拉定理(洛谷-P5091)(扩展欧拉定理实现)
- ExcelManager--基于.Net的Excel读写管理类库(一)
- insmod module_param 模块参数
- Mock完成单元测试
- 那些必须要知道的Javascript
- Zabbix SNMP配置(学习笔记十九)
- 如何在windows2008/2012上安装启明星系统。
- 7-4 散列表查找(PTA程序设计)
- 用友U815.0UFO报表知识点分享
- oracle官网下载plsql,Oracle、OracleClient、PLSQL下载安装配置(64位)
- php ios表情包,[iOS] 自定义表情包
- 建立了一个博客园创业者QQ群
热门文章
- html+css+js实现自动敲文字效果
- 更相减损法和辗转相除法(GCD)求最小公倍数和最大公约数
- Two slices reporting being the first in the same frame. 和 Could not find ref with POCXX问题
- Unity优化 lod技术
- 实验三、prim算法生成迷宫,A*算法解迷宫(实验准备)
- 噪音声压和声功率的区别_音响学堂:声压、声强、声功率区别与联系
- Web大文件(视频)上传解决方案
- 弧度 和 角度的理解, 以及相互转换
- 【极客日报】约会网站228万用户数据遭泄露;Uber 大量高管离职;周鸿祎称360曾发现特斯拉有漏洞...
- 7-4 简单计算器 (25 分)