1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
| import React, { useCallback, useEffect, useMemo, useRef, useState, } from "react";
const ToDoList = () => { const [lists, setLists] = useState([]);
const myText = useRef();
const handleClickAdd = useCallback(() => { console.log(myText); console.log(myText.current.value); setLists([...lists, myText.current.value]);
myText.current.value = ""; }, [lists]);
const handleClickDelete = useCallback( (index) => { let newLists = [...lists]; newLists.splice(index, 1); setLists(newLists); }, [lists] );
useEffect(() => { console.log("fuck 996"); }, [lists]);
const list996 = useMemo( () => lists.map((v) => { return v + "996"; }), [lists] );
return ( <div> <input ref={myText} /> <button onClick={handleClickAdd}>add to do list</button>
<div> {list996.map((value, index) => { return ( <div key={index}> <div>{value}</div> <button onClick={() => { handleClickDelete(index); }} > delete </button> </div> ); })} </div> </div> ); };
export default ToDoList;
|