zoukankan      html  css  js  c++  java
  • react TodoList

    import React, {useState} from 'react';
    
    function Li(props) {
      let done = props.done;
      let lii = done.map((val, index) => 
      <li style = {{color: 'green'}} key = {index}>{val}</li>
      );
      return (
      <ul>{lii}</ul>
      );
    }
    
    function TodoList() {
      const [list, setList] = useState([]);
      const [text, setText] = useState("");
      const [done, setDone] = useState(["thing1", "thing2"]);
    
      function Add() {
        let arr = [];
        arr = [...list, text];
        setList(arr);
        setText("");
      }
    
      function deletee( e) {
        let ind = list.indexOf(e) ;
        let arr;
        let dones = [...done, list[ind]];
        console.log(dones);
        if (ind === 0) {
          arr = list.slice(1);
        } else if (ind === list.length - 1) {
          arr = list.slice(0, list.length - 1);
        } else {
          let arr1 = list.slice(0, ind);
          let arr2 = list.slice(ind + 1);
          arr = [...arr1, ...arr2];
        }
        setList(arr);
        setDone(dones);
      }
    
      return (
        <>
          <div>
            <h3>TodoList</h3>
            <input id = "todo" onChange = {(e) => {setText(e.target.value)}} value={text}/>
            <button onClick = {Add} style = {{marginLeft: 10}} >ADD</button>
          </div>
          <ul>
            {list.map((val, index) => {
              return <li data-index = {index} key = {index}>{val}
                <button onClick = {() => deletee(val)} style = {{marginLeft: 10}}>del</button>
              </li>
            })}
          </ul>
          <div>
            <h3 style = {{color: 'green'}}>Done</h3>
            <Li done = {done}/>
          </div>
        </>
      );
    }
    
    export default TodoList;
    app.js
    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import * as serviceWorker from './serviceWorker';
    import TodoList from './App';
    
    
    ReactDOM.render(<TodoList />, document.getElementById('root'));
    
    // If you want your app to work offline and load faster, you can change
    // unregister() to register() below. Note this comes with some pitfalls.
    // Learn more about service workers: https://bit.ly/CRA-PWA
    serviceWorker.unregister();
    index.js

    用 react hook 完成一个 todoList 的 demo 可以增加 && 删除事件 删除后的事件会出现在下面 done 的列表中 效果如下

     

  • 相关阅读:
    angular打包出现JavaScript堆内存不足
    antDesign 【NG-ZORRO、Angular】日期选择框时间段nz-range-picker设置默认选择日期及限制日期可选范围
    Echarts 折线图Demo调色12种,可以直接使用~~~
    公司版git完整版
    Linux实例重启服务器后root用户远程连接失败
    Flask+Redis+mq实现高并发
    Dockerfile
    Docker应用部署
    RabbitMQ 实现实现基本通信及订单处理
    centos 7 安装docker的文档参考
  • 原文地址:https://www.cnblogs.com/zlrrrr/p/12325517.html
Copyright © 2011-2022 走看看