react 父子传值_React父子组件传值

父组件向子组件传值使用props，子组件向父组件传值通过触发方法来传值。具体栗子如下。

一、创建父组件index

import React, { useState } from "react";

import { Input } from 'antd'

import ChildComponent from "./ChildComponent";

export default () => {

const [inputValue1, setInputValue] = useState('传递的第一个参数')

return (

父组件

setInputValue(e.target.value)} />

　　//向子组件传递了一个inputValue1

);

};

二、创建子组件ChildComponent

import React, { useState } from "react";

import { Button } from "antd";

export default (props: any) => {

return (

子组件

inputValue1：{props.inputValue1}

　　//通过props拿到了父组件传递的inputValue1

);

};

三、父组件向子组件传值

父组件向子组件传值时，先将需要传递的值传递给子组件，然后在子组件中，使用props来接收父组件传递过来的值，具体的可看创建父子组件的代码。

父组件将inputValue1传递给子组件：

子组件通过props接收inputValue1：

inputValue1：{props.inputValue1}

这样在父组件的input改变时，子组件通过props获取的inputValue1也会实时改变。如：在父组件输入框输入“改变了父组件”，子组件也变成了“改变了父组件”。这样一个父组件向子组件传值就完成了。

四、子组件向父组件传值

子组件向父组件传值时，需要通过触发方法来传递给父组件

父组件定义一个方法：

//定义一个childClickFunc方法

const childClickFunc = (value: any) => {

//通过触发方法改变父组件的值 value即为子组件传递给父组件的值

setInputValue(value)

}

子组件触发父组件方法：

props.childClick('子组件改变父组件的inputValue')}>点击改变父组件的值 //通过props触发父组件传递的方法

点击Button按钮后，触发父组件方法，父子组件的值都更改为“子组件改变父组件的inputValue”，这样子组件向父组件传值就完成了。

五、父组件向子组件传递多个值的写法

父组件需要向子组件传递多个值，比如inputValue1，inputValue2，inputValue3.......

方法1：

方法2：

两种写法都可进行传值，只是第二种比较简洁。

react 父子传值_React父子组件传值相关推荐

React创建组件的方法，组件的props属性、state属性的用法和特点，父子组件传值，兄弟组件传值
创建组件的方法,组件的props属性.state属性的用法和特点,父子组件传值,兄弟组件传值 1.react组件 1.1.创建组件的方法 1.1.1.函数组件定义一个组件最简单的方式是使用JavaS ...
react中类组件传值，函数组件传值：父子组件传值、非父子组件传值
父子组件传值.非父子组件传值: 类组件传值父子组件传值子传父: 子组件:事件的触发sendMsg=()=>{this.props.person();}父组件:<Child per ...
react 父子传值_React父子组件间的传值
父组件: import React, { Component } from 'react'; import Child from './chlid'; class parent extends Com ...
Vue 组件，事件，循环，父子传值，非组件传值 vuex
<template> <div> <button @click="changebnt(1)">第一项</button> ...
vue方法传值到data_vue组件传值的几种方式
1.bus总线 //定义bus插件 //在util文件夹下定义bus.js import Vue from 'vue'; let install = (vue) => { vue.prototy ...
vue方法传值到data_Vue 组件传值几种常用方法【总结】
使用vue也有很多年了,一直都没有整理一下相关知识,给大家总结下开发过程中所遇到的一些坑,主要给大家总结一下vue组件传值的几种常用方法: 1.通过路由带参数传值 ① A组件通过query把id传给B ...
native react 更新机制_React Native - 组件的生命周期详解（附：各阶段调用的方法）...
一个 React Native 组件从它被 React Native框架加载,到最终被 React Native 框架卸载,会经历一个完整的生命周期. 在这个生命周期中,我们可以定义一些生命周期函数, ...
react加水印_React水印组件，支持图片水印，文字水印
React水印组件,支持图片水印,文字水印. 安装 npm i --save react-watermark-module 用法 import ReactWatermark from 'react-w ...
vue子组件mounted不执行_vue中父子组件传值，解决钩子函数mounted只运行一次的问题...
因为mounted函数只会在html和模板渲染之后会加载一次,但是在子组件中只有第一次的数据显示是正常的,所以需要再增加一个updated函数,在更新之后就可以重新进行取值加载,完成数据的正常显示. ...

react 父子传值_React父子组件传值

父组件

子组件

react 父子传值_React父子组件传值相关推荐

最新文章

热门文章