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

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

@Author：Runsen

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

文章目录

• index.js
• TodoList.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) => {
              // 遍历item
              return <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编写的，并且处于调试环境当中。