react todolist代码优化
Todolist.js
import React, { Component,Fragment } from 'react';
import TodoItem from './TodoItem';
import './style.css';
class Todolist extends Component {
constructor(props) { //最优先执行的函数
super(props);
this.state={
inputValue:'',
list:[]
}
this.handleinputChange=this.handleinputChange.bind(this);
this.handlebuttonClick=this.handlebuttonClick.bind(this);
this.handleItemdelt=this.handleItemdelt.bind(this);
}
render() {
return (
<Fragment>
<div>
{/*这是一个todolist*/}
<label htmlFor='insertArea'>输入内容</label>
<input
id="insertArea"
className='input'
value={this.state.inputValue}
onChange={this.handleinputChange}
/>
<button onClick={this.handlebuttonClick}> 提交 </button>
</div>
<ul>
{this.getTodoItem()}
</ul>
</Fragment>
);
}
getTodoItem(){
return this.state.list.map((item,index)=>{
return(
<TodoItem
key={index}
index={ index }
item={ item }
deleteItem={this.handleItemdelt}
/>
)
})
}
handleinputChange(e){
const value=e.target.value;
this.setState(()=>({
inputValue:value
}));
// this.setState({
// inputValue:e.target.value
// })
}
handlebuttonClick(e){
this.setState((prevState)=>{
return{
list:[...prevState.list,prevState.inputValue],
inputValue:''
}
});
// this.setState({
// list:[...this.state.list,this.state.inputValue],
// inputValue:''
// })
}
handleItemdelt(index){
// immutable
// state 不允许我们坐任何的改变
this.setState((prevState)=>{
const list=[...prevState.list];
list.splice(index,1);
return{list}
})
// const list=[...this.state.list]; // list的一个副本
// list.splice(index,1);
// this.setState({
// list: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(){
const { item }=this.props;
return (<li
onClick={this.handleclick}
dangerouslySetInnerHTML={{__html:item}}
></li>
)
}
handleclick(){
const {deleteItem,index}=this.props;
deleteItem(index);
}
}
export default TodoItem;
react todolist代码优化的更多相关文章
- react todolist
import React, {Component} from 'react'; class AddItem extends React.Component { constructor(props) { ...
- React ToDolist增加功能
补充知识点1==>npm install prop-types 先安装参数校验包 在B C页面引入 import PropTypes from 'prop-types' //参数限制 // 验证 ...
- 【转载】React入门-Todolist制作学习
我直接看的这个React TodoList的例子(非常好!): http://www.reqianduan.com/2297.html 文中示例的代码访问路径:http://127.0.0.1:708 ...
- Node.js + React + MongoDB 实现 TodoList 单页应用
之前用 Ant Design 开发了一个项目,因此对 React 的特性有了一定的了解,React 使用封装组件的思想,组件各自维护自己的状态和 UI, 组件之间通过 props 传递数据和方法.当状 ...
- 一个简单的 react 实例: < TodoList >
< react TodoList: > 组件: //引入React : import React from 'react'; //组件 class TodoList exten ...
- (三)React基础
3-1 使用React编写TodoList功能 import { Fragment} from ‘react’ Fragment是占位符 用于替代最外层div元素, 防止生成的元素会有两层div嵌套这 ...
- (2)React的开发
实例: import React from 'react'; class TodoList extends React.Component { constructor(props){ super(pr ...
- 详解 Node + Redux + MongoDB 实现 Todolist
前言 为什么要使用 Redux? 组件化的开发思想解放了繁琐低效的 DOM 操作,以 React 来说,一切皆为状态,通过状态可以控制视图的变化,然后随着应用项目的规模的不断扩大和应用功能的不断丰富, ...
- React开发实时聊天招聘工具 -第一章
第一章 课程道学 6个页面 弱化css Antd-mobile作为组件库 Redux 状态管理 React-Router 路由 Axios异步请求 后端Express框架 Socket.io 数据库: ...
随机推荐
- 如何配置nagios监控SUN(富士通)MX000系列服务器的XSCF
配置环境说明 192.168.3.80-XSCF地址 192.168.2.80-solaris操作系统IP地址 (nagios客户端) 192.168.2.120-nagios服务器端 check_x ...
- MS_SQL_获取字符串最后出现的字符串及位置
一.如:'6.7.8.2.3.4.x'得到最后一个'.'后面的字符串: declare @str1 varchar(50) set @str1='6.7.8.2.3.4.x' select REV ...
- Contset Hunter 1102 高精度求卡特兰数
用递推的方式写的写挂了,而如果用组合数又不会高精度除法,偶然看到了别人的只用高精度乘低精度求组合数的方法,记录一下 #include<bits/stdc++.h> using namesp ...
- 【摘自张宴的"实战:Nginx"】使用nginx的proxy_cache模块替代squid,缓存静态文件
#user nobody;worker_processes 1; error_log logs/static_source.error.log;#error_log logs/error.log no ...
- ROS Learning-014 learning_tf(编程) 坐标系变换(tf)广播员 (Python版)
ROS Indigo learning_tf-01 坐标系变换(tf)广播员 (Python版) 我使用的虚拟机软件:VMware Workstation 11 使用的Ubuntu系统:Ubuntu ...
- 杭电ACM刷题(1):1002,A + B Problem II 标签: acmc语言 2017-05-07 15:35 139人阅读 评
最近忙于考试复习,没有多少可供自己安排的时间,所以我利用复习之余的空闲时间去刷刷杭电acm的题目,也当对自己编程能力的锻炼吧. Problem Description I have a very si ...
- Entity Framework Tutorial Basics(16):Linq-to-Entities Projection Queries
Linq-to-Entities Projection Queries: Here, you will learn how to write LINQ-to-Entities queries and ...
- c++线程调用python
c++调用python,底层就似乎fork一个子进程启动一个python的解释器,执行python文件,由于python解释器维护了一个内部状态,所以如果c++程序是多线程,每个线程都调用python ...
- 关于IE6下绝对定位元素莫名消失的问题
一般来说,让绝对定位的元素不挨着浮动元素就OK了: 1.当绝对定位层的邻近浮动层的宽度不等于父层宽度时,以及没有清除浮动时,IE6/7,FF中显示一致: 2.当绝对定位层的邻近浮动层的宽度不等于父层宽 ...
- wordcount程序实现与测试
GitHub地址 https://github.com/jiaxuansun/wordcount PSP表格 PSP PSP阶段 预估耗时(分钟) 实际耗时(分钟) Planning 计划 10 5 ...