zoukankan      html  css  js  c++  java
  • react hook的todolist

    感觉好长时间没写博客一样,app.js代码

    import React from 'react';
    import  { useState } from 'react';
    
    function App() {
      const [input, setInput] = useState(''); // 
      const [inputList, setInputList] = useState([]); // 
      let submitData=()=>{
        let arr=[]
        arr.push({
          value:input
        })
        arr = [...arr,...inputList]
        setInputList(arr)
      }
      let delLi=(e)=>{
        let index = e.target.getAttribute('data-index')
        let arr = JSON.parse(JSON.stringify(inputList))
        arr.splice(index,1)
        setInputList(arr)
      }
      return (
        <div>
          <input onInput={(e)=>{setInput(e.target.value)}}></input> <button onClick={submitData}>提交</button>
          <div>
            <ul>
              {
                inputList.map((val,index)=>{
                  return <li onClick={(e)=>delLi(e)} key={index} data-index={index}>{val.value}</li>
                })
              }
            </ul>
          </div>
        </div>
      );
    }
    
    export default App;

    Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。就是这样。且不要直接修改哦。

  • 相关阅读:
    vue chrome调试工具开启
    mac显示隐藏文件
    mac网络变慢?
    57-文件处理小结
    56-文件修改的两种方式
    54-with管理文件操作上下文
    53-文件的三种打开方式
    51-基本文件操作
    50-Python2和3字符编码的区别
    49-字符编码
  • 原文地址:https://www.cnblogs.com/zhensg123/p/11978736.html
Copyright © 2011-2022 走看看