父子组件传值:

父组件向子组件传值通过向子组件TodoItem进行属性绑定(content={item}、index={index}),代码如下

  getTodoItem () {
return this.state.list.map((item, index) => {
return (
<TodoItem
key={index}
content={item}
index={index}
deleteItem={this.handleItemDelete}
/>
)
})
}

然后子组件通过this.props.conten、this.props.index接受值,ES6写法如下:

render() {
const { content } = this.props
return (
<li onClick={this.handleClick}>
{ content }
{/* { this.props.content } */}
</li>
)
}

子组件调用从父组件传来的父组件里的函数,间接修改父组件里的数据,从而实现子组件向父组件传值

由父组件向子组件进行函数的传递( deleteItem={this.handleItemDelete} ),注意传递的函数this的指向也需要指向父组件本身,通过在父组件的constructor里进行this指向的操作),方法同传值相同,代码如下:

 getTodoItem () {
return this.state.list.map((item, index) => {
return (
<TodoItem
key={index}
content={item}
index={index}
deleteItem={this.handleItemDelete}
/>
)
})
}

子组件通过this.props.deleteItem接收函数进行调用,ES6写法如下:

handleClick () {
const { deleteItem, index } = this.props
deleteItem(index)
// this.props.deleteItem(this.props.index)
}

完整代码如下:

子组件:TodoItem

import React, { Component } from 'react'

class TodoItem extends Component {
constructor (props) {
super(props)
// 将this指向放在constructor中执行,在复杂的组件开发中节约性能
this.handleClick = this.handleClick.bind(this)
} render() {
const { content } = this.props
return (
<li onClick={this.handleClick}>
{ content }
{/* { this.props.content } */}
</li>
)
} handleClick () {
const { deleteItem, index } = this.props
deleteItem(index)
// this.props.deleteItem(this.props.index)
}
} export default TodoItem

父组件:TodoList

import React, { Component, Fragment } from 'react'
import TodoItem from './TodoItem'
import './style.css' class TodoList extends Component {
constructor (props) {
super(props)
this.state = {
inputValue: '',
list: []
}
// 将this指向放在constructor中执行,在复杂的组件开发中节约性能
this.handleInputChange = this.handleInputChange.bind(this)
this.handleBtnChange = this.handleBtnChange.bind(this)
this.handleItemDelete = this.handleItemDelete.bind(this)
} render () {
return (
<Fragment>
<div>
<label
htmlFor="insertArea"
>
输入内容:
</label>
<input
id="insertArea"
className='input'
value={this.state.inputValue}
onChange={this.handleInputChange}
/>
<button onClick={this.handleBtnChange}>提交</button>
</div>
<ul>
{/* 如果JSX里包含逻辑代码例如map可以将其抽离出来成为一个函数 */}
{ this.getTodoItem() }
</ul>
</Fragment>
)
} getTodoItem () {
return this.state.list.map((item, index) => {
return (
<TodoItem
key={index}
content={item}
index={index}
deleteItem={this.handleItemDelete}
/>
)
})
} handleInputChange (e) {
// react新版本写法,异步获取inputValue数据需要const单独声明
const value= e.target.value
this.setState(() => {
return {
inputValue: value
}
})
// react旧版本写法
// this.setState({
// inputValue: e.target.value
// })
} handleBtnChange () {
// prevState:修改数据之前的那一个数据是怎样的,等价于 this.props
this.setState((prevState) => {
return {
list: [...prevState.list, prevState.inputValue],
inputValue: ''
}
})
// this.setState({
// list: [...this.state.list, this.state.inputValue],
// inputValue: ''
// })
} handleItemDelete (index) {
this.setState((prevState) => {
const list = [...prevState.list]
list.splice(index, 1)
return {
list
}
})
// immutable
// state 不允许我们做任何的改变
// const list = [...this.state.list]
// list.splice(index, 1)
// this.setState({
// list: list
// })
}
} export default TodoList

React之拆分组件与组件之间的传值的更多相关文章

  1. Vue和React之间关于注册组件和组件间传值的区别

    注册组件 Vue中:1.引入组件:2.在components中注册组件:3.使用组件; React中:1.引入组件:2.使用组件; 子父传值 Vue中: 父组件向子组件传值: 1.在父组件中绑定值:2 ...

  2. vue中子组件的拆分 父组件与子组件之间的传值

    vue是组件式开发,尽量独立出子组件 prop():父组件传值给子组件 $emit():子组件传值给父组件 子组件中的设置: 使用bind <template> : default-che ...

  3. React的JSX语法及组件

    最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭 ...

  4. React 深入系列1:React 中的元素、组件、实例和节点

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...

  5. React 深入系列2:组件分类

    文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列2:组件分类 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加 ...

  6. react系列(三)组件间通信

    组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...

  7. React的单向数据流与组件间的沟通

    今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...

  8. react(二):组件的通信

    对于组件来说,通信无非两种,父子组件通信,和非父子组件通信 一.父子父子组件通信 1.父组件给子组件传值 对于父组件来说,props是他们之间的媒介 class Parent extends Comp ...

  9. React 世界的一等公民 - 组件

    猪齿鱼Choerodon平台使用 React 作为前端应用框架,对前端的展示做了一定的封装和处理,并配套提供了前端组件库Choerodon UI.结合实际业务情况,不断对组件优化设计,提高代码质量. ...

  10. 浅谈React受控与非受控组件

    背景 React内部分别使用了props, state来区分组件的属性和状态.props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变.而state维持组件内部的状态更 ...

随机推荐

  1. 关于爬虫的日常复习(18)——scrapy系列3

  2. 轻松理解 Kubernetes 的核心概念

    Kubernetes 迅速成为云环境中软件部署和管理的新标准. 与强大的功能相对应的是陡峭的学习曲线. 本文将提供 Kubernetes 的简化视图,从高处观察其中的重要组件,以及他们的关联. 硬件 ...

  3. 生成链接中的全限定URL(Generating Fully Qualified URLs in Links) | 在视图中生成输出URL | 高级路由特性

    结果:<a class="myCSSClass"href="https://myserver.mydomain.com/Home/Index/MyId#myFrag ...

  4. RainbowPlan团队项目-总结

    博客介绍 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要求在哪里 https:// ...

  5. Docker底层架构之简介

    简介 Docker 底层的核心技术包括 Linux 上的命名空间(Namespaces) 控制组(Control groups) Union 文件系统(Union file systems) 容器格式 ...

  6. JDK源码之Byte类分析

    一 简介 byte,即字节,由8位的二进制组成.在Java中,byte类型的数据是8位带符号的二进制数,以二进制补码表示的整数 取值范围:默认值为0,最小值为-128(-2^7);最大值是127(2^ ...

  7. 解决IDEA使用lombok注解无效,@Data不生效问题

    在settings设置启用注解即可:

  8. edltplus使用正则表达式替换多余空行

    24-7 <font style="font-weight:bold;">24-7</font><div class="tab_conten ...

  9. JsonCpp中文unicode编码问题

    用JsonCpp解析C++中文unicode编码,转换问题,今天找打了一种解决办法 这个问题画了不少时间,贴出来供大家参考 在json_reader.cpp中找到codePointToUTF8函数,添 ...

  10. Codeforces_732_D

    http://codeforces.com/problemset/problem/732/D 二分查找. #include<iostream> #include<cstring> ...