react--todolist

2022-04-08 20:31:36 阅读：147 来源： 互联网

标签：obj title -- newarr inputval react todolist state let

 1 import React, { createRef, Fragment } from "react";
 2 
 3 export default class Todolist extends React.Component {
 4   constructor() {
 5     super();
 6     this.state = {
 7       obj: [
 8         { title: "吃饭" },
 9         { title: "睡觉" },
10         { title: "打豆豆" },
11         { title: "学习" },
12         { title: "打游戏" },
13       ],
14     };
15     this.inputval = createRef();
16   }
17   fun = () => {
18     return this.state.obj.map((v, i) => {
19       return (
20         <li key={i}>
21           <span>{v.title}</span>----
22           <button onClick={this.del.bind(this, i)}>删除</button>-----
23           <button
24             onClick={() => {
25               this.updata(i);
26             }}
27           >
28             编辑
29           </button>
30         </li>
31       );
32     });
33   };
34   add = () => {
35     if (this.inputval.current.value !== "") {
36       let newarr = [];
37       newarr = [...this.state.obj, { title: this.inputval.current.value }];
38       this.setState({
39         obj: newarr,
40       });
41       this.inputval.current.value = "";
42     }
43   };
44   del = (i) => {
45     if (window.confirm("确认要删除吗？")) {
46       let newarr = [];
47       newarr = this.state.obj;
48       newarr.splice(i, 1);
49       this.setState({
50         obj: newarr,
51       });
52     }
53   };
54   updata = (i) => {
55     let newword = window.prompt("请输入编辑后的内容");
56     if (newword) {
57       let newarr = [];
58       newarr = this.state.obj;
59       newarr[i].title = newword;
60       this.setState({
61         obj: newarr,
62       });
63     }
64   };
65   clear = () => {
66     this.setState({
67       obj: [],
68     });
69   };
70 
71   render() {
72     return (
73       <Fragment>
74         {this.state.obj.length === 0 ? (
75           <h3>暂无数据</h3>
76         ) : (
77           <ul>{this.fun()}</ul>
78         )}
79 
80         <input type="text" ref={this.inputval} />
81         <button onClick={this.add}>添加</button>
82         <button onClick={this.clear}>清空</button>
83       </Fragment>
84     );
85   }
86 }

标签：obj,title,--,newarr,inputval,react,todolist,state,let
来源： https://www.cnblogs.com/sprite692/p/16119602.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react--todolist