React之拆分组件与组件之间的传值
父子组件传值:
父组件向子组件传值通过向子组件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之拆分组件与组件之间的传值的更多相关文章
- Vue和React之间关于注册组件和组件间传值的区别
注册组件 Vue中:1.引入组件:2.在components中注册组件:3.使用组件; React中:1.引入组件:2.使用组件; 子父传值 Vue中: 父组件向子组件传值: 1.在父组件中绑定值:2 ...
- vue中子组件的拆分 父组件与子组件之间的传值
vue是组件式开发,尽量独立出子组件 prop():父组件传值给子组件 $emit():子组件传值给父组件 子组件中的设置: 使用bind <template> : default-che ...
- React的JSX语法及组件
最近一个同事很急没有做任何交接就请了陪产假,然后我来维护.说实在的我一开始是一脸懵逼的.因为MV*项目里用的最多的还是Vue:React听说也了解过,但毕竟不熟... 不过不管如何这也是工作:同事也恭 ...
- React 深入系列1:React 中的元素、组件、实例和节点
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加深对React的理解,以及在项目中 ...
- React 深入系列2:组件分类
文:徐超,<React进阶之路>作者 授权发布,转载请注明作者及出处 React 深入系列2:组件分类 React 深入系列,深入讲解了React中的重点概念.特性和模式等,旨在帮助大家加 ...
- react系列(三)组件间通信
组件间通信 React的基本组件元素是一个个组件,组件之间可能存在关联.组合等关系.不同的组件之间,经常会发生数据传递或者交换,我们称之为组件间通信. 根据传递的复杂程度,可以分为三种情况: 父子间通 ...
- React的单向数据流与组件间的沟通
今天来给大家总结下React的单向数据流与组件间的沟通. 首先,我认为使用React的最大好处在于:功能组件化,遵守前端可维护的原则. 先介绍单向数据流吧. React单向数据流: React是单向数 ...
- react(二):组件的通信
对于组件来说,通信无非两种,父子组件通信,和非父子组件通信 一.父子父子组件通信 1.父组件给子组件传值 对于父组件来说,props是他们之间的媒介 class Parent extends Comp ...
- React 世界的一等公民 - 组件
猪齿鱼Choerodon平台使用 React 作为前端应用框架,对前端的展示做了一定的封装和处理,并配套提供了前端组件库Choerodon UI.结合实际业务情况,不断对组件优化设计,提高代码质量. ...
- 浅谈React受控与非受控组件
背景 React内部分别使用了props, state来区分组件的属性和状态.props用来定义组件外部传进来的属性, 属于那种经过外部定义之后, 组件内部就无法改变.而state维持组件内部的状态更 ...
随机推荐
- 关于爬虫的日常复习(18)——scrapy系列3
- 轻松理解 Kubernetes 的核心概念
Kubernetes 迅速成为云环境中软件部署和管理的新标准. 与强大的功能相对应的是陡峭的学习曲线. 本文将提供 Kubernetes 的简化视图,从高处观察其中的重要组件,以及他们的关联. 硬件 ...
- 生成链接中的全限定URL(Generating Fully Qualified URLs in Links) | 在视图中生成输出URL | 高级路由特性
结果:<a class="myCSSClass"href="https://myserver.mydomain.com/Home/Index/MyId#myFrag ...
- RainbowPlan团队项目-总结
博客介绍 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/GeographicInformationScience/ 这个作业要求在哪里 https:// ...
- Docker底层架构之简介
简介 Docker 底层的核心技术包括 Linux 上的命名空间(Namespaces) 控制组(Control groups) Union 文件系统(Union file systems) 容器格式 ...
- JDK源码之Byte类分析
一 简介 byte,即字节,由8位的二进制组成.在Java中,byte类型的数据是8位带符号的二进制数,以二进制补码表示的整数 取值范围:默认值为0,最小值为-128(-2^7);最大值是127(2^ ...
- 解决IDEA使用lombok注解无效,@Data不生效问题
在settings设置启用注解即可:
- edltplus使用正则表达式替换多余空行
24-7 <font style="font-weight:bold;">24-7</font><div class="tab_conten ...
- JsonCpp中文unicode编码问题
用JsonCpp解析C++中文unicode编码,转换问题,今天找打了一种解决办法 这个问题画了不少时间,贴出来供大家参考 在json_reader.cpp中找到codePointToUTF8函数,添 ...
- Codeforces_732_D
http://codeforces.com/problemset/problem/732/D 二分查找. #include<iostream> #include<cstring> ...