react 组件传值

港控/mmm° 2023-06-29 05:46 15阅读 0赞

首先 声明 react  两种绑定 事件的方法

1

<div onClick=\{this.funclick.bind(this)\}></div>

funclick()\{

\}

2

<div onClick=\{this.funclick\}></div>

funclick = () =>\{

\}

const  \{ content \} = this.props

等价于 this.props.content

一. 父子组件传值

**父组件**

引入子组件

import TodoItem from 'childCompented';

state = \{

name:'大师兄'

\}

handelChildClick = ()=>\{

\}

<TodlItem  content=\{this.state.name\} /> // 可以传多个参数

**子组件**

import react from 'react'

class TodoItem extends React.Component \{

render () \{

return (

<div>

<p>我是子组件\{this.props.content\}</p>

</div>

)

\}

\}

export default TodoItem

二、 子组件 触发 父组件方法(子组件 向父组件 传值)-----------------------------------------------------------

**父组件**

引入子组件

import TodoItem from 'childCompented';

state = \{

name:'大师兄'

\}

handelChildClick = (name)=>\{

//  新的写法  里面接受一个 函数  此时 是异步

//this.setState((prevState)=>\{ //prevState   只  this.state   保留原来的状态

//return\{

//list:\[...prevState   .lise,prevState.name\],

//    name:name

//\}

//\})

原先的写法

this.setState(\{

list:\[...this.state.lise,this.state.name\],

name:name

\})

此时的name  是 大师兄 pro  子组件传过来的

\}

<TodlItem  content=\{this.state.name\}  handleItemDelete = \{this.handelChildClick \} /> // 可以传多个参数  和方法

**子组件**

import react from 'react'

class TodoItem extends React.Component \{

constructor(props)\{

super(props)

state = \{

name:'大师兄pro'

\}

//this.handleClick = this.handleClick.bind(this)

\}

handleClick = () =>\{

// 将content 传给 父组件

console.log(this.state.name)

this.props.handleItemDelete (this.state.name)

\}

render () \{

return (

<div>

<p onClick = \{this.handleClick\}>我是子组件\{this.state.name\}</p>

</div>

)

\}

\}

export default TodoItem

发表评论取消回复

表情：

评论列表（有 0 条评论，15人围观）

还没有评论，来说两句吧...

相关阅读

相关 React组件通信（父子组件传值）

1、父组件传值子组件 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9

偏执的太偏执、/ 2023年07月19日 15:27/ 0 赞/ 88 阅读

相关 vue组件传值

父组件向子组件传值通过`v-bind` ![在这里插入图片描述][20200223152103416.png] 子组件向辅助间传值通过`this.$emit()`

逃离我推掉我的手/ 2023年07月07日 12:36/ 0 赞/ 23 阅读

相关 react 组件传值

首先声明 react 两种绑定事件的方法 1 <div onClick=\{this.funclick.bind(this)\}></div> funclic

港控/mmm°/ 2023年06月29日 05:46/ 0 赞/ 16 阅读

相关 Vue组件传值

子组件中，默认情况下无法访问到父组件中data上的数据和methods中的方法父组件向子组件传值 1. 定义子组件，props中设置需要父组件传入的参数名 2.

末蓝、/ 2023年06月26日 12:27/ 0 赞/ 27 阅读

相关 vue组件传值

> 1. 计算属性和方法的区别：计算属性中不会添加重复内容；方法添加会重复添加 > 2. 生命周期中的销毁：普通的显示隐藏`v-show`并不是销毁,只是将元素隐藏 > 3

た入场券/ 2023年06月15日 14:25/ 0 赞/ 24 阅读

相关 react组件之间传值

看过一些文章介绍react组件之间传值，无外乎以下几种情况：父子组件之间相互传值，兄弟节点之间传值。最常见的就是父子组件，做法也很简单：就是在父组件中直接通过props

落日映苍穹つ/ 2023年01月06日 01:13/ 0 赞/ 235 阅读

相关学习笔记——react组件间传值

-------------------- > 在react中，组件间传值是一个非常重要的功能。react中组件拆分要合理，精细。所以组件拆分时，会把一个页面级组件分为容器组件

刺骨的言语ヽ痛彻心扉/ 2022年12月19日 00:54/ 0 赞/ 181 阅读

相关 vue 组件传值

父传子一、父传子 1.分发事件props和$emit(方法1) 2.$ listeners和$ attrs(方法2

妖狐艹你老母/ 2022年12月15日 03:39/ 0 赞/ 245 阅读

相关 react组件传值

react组件传值 1.父子组件传值 1.1父传子父组件 import Asign from './view/asign' import

小咪咪/ 2022年09月05日 01:47/ 0 赞/ 194 阅读

相关 vue组件传值

vue组件传值-------总结 1·父组件传值子组件父组件通过 :paramsName1="params1" :paramsName2="params2"的方式将值

绝地灬酷狼/ 2021年09月17日 04:50/ 0 赞/ 489 阅读