React组件通信初识

一、效果

1、在输入框输入代办事项后，点击添加后，事项裂变增加一项事项，默认未选中；

2、鼠标移动到事项列表时，显示删除按钮，点击删除，删除单个事项当勾选完事项后，

3、点击完成事项，事项列表剔除已勾选的事项，并提示完成了几条事项;

二、代码

（一）项目结构

主要是在App.js文件中得以显示出来，在组件库components文件夹中创建WhatToDo文件夹存放整体功能，并在WhatToDO里面再创建components文件夹用以存放组件

（二）代码

1、WhatToDo的index.jsx文件

javascript 复制代码

import React from 'react';
import './index.css';
import Item from './components/Item';

export default class WhatToDo extends React.Component {
    state = {
        input: '',
        itemList: [
            {
                item: '学习',
                isDone: true,
                id: 1,
            },
            {
                item: '吃饭',
                isDone: false,
                id: 2,
            },
            {
                item: '学习React',
                isDone: false,
                id: 3,
            },
        ],
    }
    // 处理输入框变化
    handleChange = (e) => {
        this.setState({input: e.target.value});
    }
    // 处理添加
    handleSubmit = () => {
       let { itemList } = this.state;
       itemList.push({
           item: this.state.input,
           isDone: false,
           id: new Date().getTime(),
       });

       this.setState({
           itemList,
           input: '',
       });
    }
    // 处理删除
    deleteItem = (id) => {
        this.setState({
            itemList: this.state.itemList.filter(item => item.id !== id),
        });
    }
    // 处理改变状态
    changeItem = (id) => {
        this.setState({
            itemList: this.state.itemList.map(item => item.id === id ? {...item, isDone: !item.isDone} : item),
        });
    }
    // 处理完成事项
    handleComplete = () => {
        let { itemList } = this.state;
        const doneList = itemList.filter(item => item.isDone);
        itemList = itemList.filter(item => !item.isDone);
        this.setState({
            itemList,
        });
        alert(`已完成${doneList.length}个事项`);
    }
    render() {
        return (
            <div className="what_to_do">
                <div>
                     <input type="text" value={this.state.input} onChange={this.handleChange} placeholder="请输入要办事项" /> <button onClick={()=>this.handleSubmit()}>添加</button>
                </div>
                <div className="item_list">
                    {this.state.itemList.map((item, index) => (
                        <Item key={item.id} item={item} changeItem={this.changeItem} deleteItem={this.deleteItem} />
                    ))}
                </div>
                <div className="bottom_btn">
                    <button onClick={()=>this.handleComplete()}>完成事项</button>
                </div>
            </div>
        );
    }
}

2、事项列表组件 Item.jsx

javascript 复制代码

import React from 'react';
import './item.css';

export default class Item extends React.Component {
    state = {
        showBtn: false,
    }
    showBtn = () => {
        this.setState({showBtn: true});
    }
    render() {
        return (
            <div className="item" onMouseEnter={this.showBtn} onMouseLeave={()=>this.setState({showBtn: false})}>
                <div>
                    <input type="checkbox" checked={this.props.item.isDone} onChange={()=>this.props.changeItem(this.props.item.id)} />
                    <span>{this.props.item.item}</span>
                </div>
                <button style={{display: this.state.showBtn ? 'block' : 'none'}} onClick={()=>this.props.deleteItem(this.props.item.id)}>删除</button>
            </div>
        );
    }
}

三、注意的点

1、组件的引入和使用最好是首字母大写，便于React识别及渲染

2、样式类名使用className

3、时间的绑定用on加事件类型

4、父组件向子组件传值采用属性的形式，子组件使用this.props使用(类式组件)

5、子组件向父组件传值时，在父组件挂载的子组件上以属性的形式将父组件的处理函数传递给子组件；子组件通过this.props+传递过来的函数名进行调用，如果有参数的话，可以在调用时加入参数