1.前言

1. 父子组件传值我们梳理过了
2. 兄弟组件也该梳理了
3. 这种todoList是常见的练习方式
4. 今天就用 react实现一下

---

2.效果预览

2.gif

---

3. 组件分析

3个组件分析

1. 上边的输入框和添加属于 TodoComponent组件
2. 下边的列表 属于ListComponent组件
3. 一个完整的TodolistComponent组件 把上面2个组件整合到一起

---

4. 传值分析

4.1 父子组件传值

1 父组件 → 子组件 ; 通过属性传值props
2 子组件 → 父组件 ; ----回调的方式 ;vue:$on和$emit,

---

4.2 兄弟组件传值

1. 借助父组件 类似 Vue.prototype.$bus = new Vue() 原理
2. 第三方状态管理库例如: vuex, redux, react-redux ,mobx
3. 这里采用 借助父组件的形式, 这三种 redux, react-redux ,mobx都有系列文章讲解,文末有链接,欢迎查看

---

5. TodoComponent 组件

5.1 简单分析

1. 输入框的 ref属性

2.单标签的 结束 标记 / 必须得写

3. 点击事件的 this
4. 把输入框的值 通过回调函数的形式传值给父组件

---

5.2 具体代码

  class TodoComponent extends React.Component {
            submit() {
                var title = this.refs.title.value
                var des = this.refs.des.value
                console.log(title, des);
                // 传递给父组件 回调
                this.props.submit({ title, des });
            }
            render() {
                return (
                    <div>
                        {/*  斜杠 闭合*/}
                        <input type="text" ref="title" defaultValue="白居易" />
                        <br />
                        <textarea name="" ref="des" defaultValue="诗魔" cols="30" rows="10"></textarea>
                        <br />
                        <button onClick={this.submit.bind(this)}> 添加</button>
                    </div>
                );
            }
        }

---

1. defaultValue默认值
2. submit 父组件的回调函数

---

6.ListComponent

6.1 简单分析

1. 常规的 循环结构
2. 接收 传过来的 列表数据
3. 子元素调用父组件的删除 函数进行删除

---

6.2 具体代码

   class ListComponent extends React.Component {
            // ----自定义函数
            deleteItem(index) {
                //  删除操作
                // props只能用,不能改
                console.log("子删除", this.props);
                //  但是状态在父元素存着 修改父元素状态
                //  父元素通过属性传值的方式把函数地址给子元素
                // 子组件就可以回调父组件
                this.props.delete(index);
            }
            render() {
                //  属性传值
                let { todoData } = this.props;
                return (
                    <div>
                        <ul>
                            {todoData.map((todoObj, index) => {
                                return (
                                    <li key={index}>
                                        <h2>{todoObj.title}</h2>
                                        <p>{todoObj.des}</p>
                                        <button onClick={this.deleteItem.bind(this, index)}> 删除</button>
                                    </li>
                                )
                            })}
                        </ul>
                    </div>
                );
            }
        }
      

---

1. todoData 父组件传过来的 列表数据
2. deleteItem 父组件传过来的删除 函数
3. 修改this指向

---

7. TodolistComponent

7.1 简单分析

1. 子组件的列表数据在这个父组件存着
2. 删除函数 t
3. this

---

7.2 具体代码

 class TodolistComponent extends React.Component {
            constructor() {
                super();
                this.state = {
                    todoData: [
                        { title: "张三", des: "举例第一常用" },
                        { title: "李四", des: "举例第二常用" }
                    ]
                }
                // 修改this
                this.deleteItemHandle = this.deleteItemHandle.bind(this)
            }
            deleteItemHandle(index) {
                console.log("父组件删除", index, this);
                //1 新值不依赖旧的值
                // this.setState({todoData:[]})

                // 根据下标删除 splice  有返回值没 看下文档
                // 1.修改原数组  返回删除的内容
                // 2. 新的值要依赖旧的值 
                this.setState((oldState) => {
                    oldState.todoData.splice(index, 1)
                    return {
                        todoData: oldState.todoData
                    }
                })
            }
            render() {
                let { todoData } = this.state;
                return (
                    <div>
                        <TodoComponent submit={(itemObj) => {
                            console.log("submit -父组件", itemObj);
                            this.setState((oldState) => {
                                oldState.todoData.push(itemObj)
                                return {
                                    todoData: oldState.todoData
                                }
                            })
                        }} />
                        <hr />
                        <ListComponent delete={this.deleteItemHandle} todoData={todoData} />
                    </div>
                );
            }
        }

---

1. state存着todoData 表示列表数据
2. 2种常用修改this指向的方式复习 箭头函数 ,构造函数绑定
3. 删除todoData.splice(index, 1)
   4.setState回调修改

---

参考资料

vuex系列-1
react系列-redux原理
react系列-react-redux

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉