2020/11/18、周三、今天又是奋斗的一天。

@Author：Runsen

这东西已经有很多大佬们写过了，就不多班门弄斧了。主要使用这个例子入门 React ，包括 state、props、组件间通信这些基础内容。Todo List 应用通常都被列为能入手开发项目的 Hello World 典范。

文章目录

index.js
TodoList.js
拆分组件
- TodoList.js
- TodoItem.js
React developer tools 安装及使用

index.js

TodoList.js

具体代码如下。

import  React, { Component , Fragment}  from 'react'
class TodoList extends Component{constructor(props){super(props);// state 是组件在渲染自身时用到的数据。我们可以通过 this.state 获得自己在 state 里定义的数据。this.state = {inpuValue : '',list: []}}render(){return (<Fragment ><div>{/* label中的htmlFor和input中的id一致，实现点击label标签，光标聚焦到input输入框中 */}<label htmlFor="insertArea">输入内容</label><input id="insertArea"value={this.state.inpuValue}onChange={this.handleInputChange.bind(this)}/><button onClick={this.handleBtnClick.bind(this)}>提交</button></div><ul>{this.state.list.map((item,index) => {// 遍历itemreturn <li key={index} onClick={this.handleItemDelete.bind(this,index)}dangerouslySetInnerHTML = {{__html: item}}></li>})}</ul></Fragment>)}handleInputChange(e) {// 可以使用 this.setState() 方法更新 state，当this.setState()被调用时，React 会调用组件的 render() 方法重新渲染组件。需要提到的是 this.setState() 是异步的。this.setState({inpuValue: e.target.value})}handleBtnClick() {this.setState({list: [...this.state.list,this.state.inpuValue],inpuValue : ''})}handleItemDelete(index) {// state 不允许我们做任何改变 不能改变数据，需要复制一份出来// ...this.state.list ES6中新加入的数组展开运算符，将数组展开为列表// var a = [1,2,3]// console.log(...a)  //1 2 3// console.log([...a]) //[1,2,3]const list = [...this.state.list]list.splice(index,1)this.setState({list: list})// 不推荐使用 this.state.list.split(index,1)}
}export default TodoList

拆分组件

下面将TodoList拆分成两个组件。

React数据流动是单向的，父组件向子组件通信也是最常见的。父组件通过props 向子组件传递需要的信息。

TodoList.js

import React, { Component, Fragment } from 'react';
import TodoItem from './TodoItem';
import './style.css';class TodoList extends Component {// React数据流动是单向的，父组件向子组件通信也是最常见的。constructor(props) {super(props);this.state = {inputValue: '',list: []}this.handleInputChange = this.handleInputChange.bind(this);this.handleBtnClick = this.handleBtnClick.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.handleBtnClick}>提交</button></div><ul>{this.getTodoItem()}</ul></Fragment>)}getTodoItem() {// ES6遍历数组return this.state.list.map((item, index) => {return (<TodoItem key={index}content={item} index={index}deleteItem={this.handleItemDelete}/>)})}handleInputChange(e) {const value = e.target.value;this.setState(() => ({inputValue: value}));}handleBtnClick() {this.setState((prevState) => ({list: [...prevState.list, prevState.inputValue],inputValue: ''}));}handleItemDelete(index) {this.setState((prevState) => {const list = [...prevState.list];list.splice(index, 1);return {list}});}
}export default TodoList;

TodoItem.js

import React, { Component } from 'react';class TodoItem extends Component {constructor(props) {super(props);this.handleClick = this.handleClick.bind(this);}render() {// 父组件通过 props 向子组件传递需要的信息。直接使用this.props取出即可const { content }  = this.props;return (<div onClick={this.handleClick}>{content}</div>)}handleClick() {// deleteItem是方法，当点击删除事件发生，父传子const { deleteItem, index } = this.props;deleteItem(index);}
}export default TodoItem;

React developer tools 安装及使用

GITHUB上面的地址下载地址： https://github.com/haotian-wang/google-access-helper
下载安装包

下载完成之后解压，打开Chrome浏览器的右上角，点击更多工具，再点击扩展程序，打开开发者模式，点击加载已解压的扩展程序，可以安装完成。

React developer tools有三种颜色，三种颜色代表三种状态：

灰色：这种就是不可以使用，说明页面不是用React编写的。
黑色: 说明页面是用React编写的，并且处于生成环境当中。
红色：说明页面是用React编写的，并且处于调试环境当中。

七十六、React中的TodoList和拆分组件，组件之间的传值相关推荐

七十六、Python | Leetcode二分查找和分治算法系列
@Author:Runsen @Date:2020/7/4 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏艰 ...
JavaScript学习（七十六）—this的指向问题
JavaScript学习(七十六)-this的指向问题在文档中(全局环境中)直接使用this,代表的是window 在HTML事件处理程序中,如果将this作为实参传递给事件处理函数,this代表的 ...
（七十六）：Masked Autoencoders Are Scalable Vision Learners
(七十六):Masked Autoencoders Are Scalable Vision Learners Abstract 1. Introduction 2. Related Work 3. M ...
C语言/C++常见习题问答集锦(七十六)之玫瑰花寄语
C语言/C++常见习题问答集锦(七十六)之玫瑰花寄语程序之美在古希腊神话中,玫瑰花集爱与美于一身,既是美神的化身,又溶进了爱神的血液.可以说,在世界范围内,玫瑰是用来表达爱情的通用语言,形成了永不 ...
第七十六章方法关键字 - SoapAction
文章目录第七十六章方法关键字 - SoapAction 用法详情默认 WSDL的关系对消息的影响第七十六章方法关键字 - SoapAction 指定当通过HTTP将此方法作为web方法调 ...
第七十六章 SQL命令 TOP
文章目录第七十六章 SQL命令 TOP 大纲参数描述 TOP int值 TOP和缓存查询 TOP和ORDER BY TOP 优化 TOP与聚合和函数示例第七十六章 SQL命令 TOP 指定返 ...
JavaScript学习（七十）—函数中this的指向问题
JavaScript学习(七十)-函数中this的指向问题一.这些this的指向,是当我们调用函数的时候确定的,调用方式的不同决定了this的指向不同,一般指向我们的调用者
今有兽，六首四足；禽，四首二足，上有七十六首，下有四十六足。问：禽、兽各几何？...
根据题目描述,兽有六首四足,禽有四首二足,上面有七十六首,下面有四十六足.根据题意,兽和禽的数量可以用首数和足数来确定. 首数为76,足数为46,先用首数来算: 76首/6首=12.67个,可知兽有1 ...
html5诗歌作业,《品味诗词群》总第七十六期作业
<品味诗词群>总第七十六期作业老物件总能给人以无限的怀想.本期作业以<收录机>为主题,以图题诗.韵部不限,诗词均可,要求不变,期待精彩! 品味诗词雅韵,传承华夏文明. 七绝 ...

七十六、React中的TodoList和拆分组件，组件之间的传值

文章目录

index.js

TodoList.js

拆分组件

TodoList.js

TodoItem.js

React developer tools 安装及使用

七十六、React中的TodoList和拆分组件，组件之间的传值相关推荐

最新文章

热门文章