1.前言
- 父子组件传值我们梳理过了
- 兄弟组件也该梳理了
- 这种
todoList是常见的练习方式- 今天就用
react实现一下
2.效果预览
3. 组件分析
3个组件分析
- 上边的输入框和添加属于
TodoComponent组件- 下边的列表 属于
ListComponent组件- 一个完整的
TodolistComponent组件 把上面2个组件整合到一起
4. 传值分析
4.1 父子组件传值
1 父组件 → 子组件 ; 通过属性传值
props2 子组件 → 父组件 ; ----回调的方式 ;
vue:$on和$emit,
4.2 兄弟组件传值
- 借助父组件 类似
Vue.prototype.$bus = new Vue()原理- 第三方状态管理库例如:
vuex,redux,react-redux,mobx- 这里采用 借助父组件的形式, 这三种
redux,react-redux,mobx都有系列文章讲解,文末有链接,欢迎查看
5. TodoComponent 组件
5.1 简单分析
- 输入框的
ref属性2.单标签的 结束 标记
/必须得写
- 点击事件的
this- 把输入框的值 通过回调函数的形式传值给父组件
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> ); } }
defaultValue默认值submit父组件的回调函数
6.ListComponent
6.1 简单分析
- 常规的 循环结构
- 接收 传过来的 列表数据
- 子元素调用父组件的删除 函数进行删除
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> ); } }
todoData父组件传过来的 列表数据deleteItem父组件传过来的删除 函数- 修改
this指向
7. TodolistComponent
7.1 简单分析
- 子组件的列表数据在这个父组件存着
- 删除函数 t
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> ); } }
state存着todoData表示列表数据- 2种常用修改
this指向的方式复习 箭头函数 ,构造函数绑定- 删除
todoData.splice(index, 1)
4.setState回调修改
