Day15 Todo List

https://ithelp.ithome.com.tw/upload/images/20210930/20139800yMbwGtrySq.png

import React , { useState }from 'react'

const Dolist = () => {

    const [inputList,setInputList] = useState("");
    const [Items,setItems] = useState([]);

    const itemEvent = (event) => {
        setInputList(event.target.value);
    };

    const listOfItems = () => {
        setItems((oldItems) => {
            return [...oldItems , inputList];
        });
    };

    return (
    <div>
      <div className="main_con">
        <div className="center_con">
         
         <h1>ToDo  List</h1>
         <br/>
         <input type = "text" 
                placeholder="add todo Item" 
                value={inputList} 
                onChange= {itemEvent} />
         <button onClick = { listOfItems } > + </button>

         <ol>         
           
            { Items.map((itemval) => {
                 return <ul> {itemval} </ul>
             })}

         </ol>         
        </div>
      </div> 
    </div>
    )
}

export default Dolist

<<:  Day15 ATT&CK for ICS - Execution(2)

>>:  Day15 Lua 的全域环境变数 _G 与 _ENV

【Day22】在网页中插入HTML标签的实务做法

tags: JavaScript 在网页中插入HTML标签的实务做法 前一篇介绍了在网页中利用DOM...

资料抽象与封装(Data Abstraction vs Encapsulation)

人们经常会被资料抽象和封装混淆,把抽象的概念当作封装或信息隐藏。事实并非如此。以下定义来自 ISO/...

[FGL] 服务简单收 - IMPORT 3 利用http与XML套件取 Web资源

没有人能一次做好所有的事情,也不可能有一套系统收尽所有资料。既然如此,如何适当且适时的抓取外部资料...

Sass @mixin实现RWD DAY36

今天我们要来介绍 Sass Mixin 与 content的搭配 来解决RWD Scss: @mix...

# Day 19 Physical Memory Model (Summary)

一样先来个简单的总结吧! 这份文件 Physical Memory Model 是在描述 Linux...