5. react 基础 - 组件拆分 和 组件传值
2024-08-30 20:17:36
1.将 todoList 进行拆分
创建 编写TodoList.js
import React, {Component, Fragment} from 'react';
import TodoItem from './TodoItem';
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {inputValue: '', list: []}
this.inputChange = this.inputChange.bind(this);
this.itemDelete = this.itemDelete.bind(this);
this.addClick = this.addClick.bind(this);
}
render() {
return (
<Fragment>
<input type='text' value={this.state.inputValue} onChange={this.inputChange}/>
<button onClick={this.addClick}>提交</button>
<ul>
{/*获取 子项*/}
{this.getItem()}
</ul>
</Fragment>
);
}
getItem() {
return this.state.list.map((value, index) => {
/*key 属性 应该加在 最外层 元素上*/
return (
<TodoItem key={index} value={value} index={index} itemDelete={this.itemDelete}/>
);
})
}
inputChange(e) {
const value = e.target.value;
// 异步 的 setState
this.setState(() => ({
inputValue: value
}));
}
addClick() {
const value = this.state.inputValue;
if (!value) return;
// prevState 表示 改变 state 之前的 state 值
this.setState((prevState) => ({
list: [...prevState.list, prevState.inputValue],
inputValue: ''
}))
}
itemDelete(index) {
this.setState((prevState) => {
const list = [...prevState.list];
list.splice(index, 1);
// 形如 return {list:list}
return {list};
})
}
}
export default TodoList;
创建 编写TodoItem.js
#TodoItem.js
import React , { Component } from 'react';
class TodoItem extends Component{
constructor(props){
super(props);
this.delete = this.delete.bind(this);
}
render() {
const {value} = this.props;
return (
<div onClick={this.delete}>{value}</div>
);
}
delete(){
const {itemDelete , index} = this.props;
itemDelete(index);
}
}
export default TodoItem;
最新文章
- Xcode7使用插件的简单方法&;&;以及怎样下载到更早版本的Xcode
- JS函数运行在它们被定义的作用域内,而不是它们被执行的作用域内
- I2C
- 基于Jenkins的环境搭建
- PDA调用WCF服务引用
- libGraphicsMagickWand.so: cannot open shared object file: No such file or directory stack traceback:
- aliexpress 上传图
- warshall、
- protocol error, got &#39;n&#39; as reply type byte
- 老李分享:Eclipse中开发性能测试loadrunner脚本
- Re.常系数齐次递推
- 调整Eclipse中代码字体字号
- 深入FM和FFM原理与实践
- Java 容器源码分析之集合类详解
- ADB三个进阶使用
- XtraEditors五、SpinEdit、TimeEdit
- Android之Android WebView常见问题及解决方案汇总
- Android插件化开发之解决OpenAtlas组件在宿主的注冊问题
- [转载]CentOS6&;nbsp;快速搭建轻量级远程桌面&;nbsp;Xfce&;nb
- Java程序设计10——与运行环境交互
热门文章
- int类型和char类型的区别
- expect 自动输入密码
- swoole在线聊天学习笔记
- Python 爬虫是什么
- 用cmd运行java可以javac不行(win10)
- ServletContext 详解
- Object.keys(),Object.values(),Object.entries()
- POJ-3984 迷宫问题(BFS找最短路径并保存)
- Linux基础操作及概念
- 每天一点点之vue框架开发 - vue-router路由进阶(路由别名、跳转、默认路由、二级路由、路由守卫)