todoList (react) 简单运用

function Index() {

  const [list, setList] = React.useState(["learn react", "learn Engilish"]);
  const [input, setInput] = React.useState("");
  
  const del=index=>{
    list.splice(index,1)
     setList([...list])
    
  }

  return pug`
      input(onChange=(e) => setInput(e.target.value))
      button(onClick=()=>setList([...list, input]))
        |add 
      ul
        each item,index in list
          li= item 
            button(onClick=()=>del(index))
              |del
  `;
 
}
export default Index;

拆了一个小组件出来

function Ul(props){
  return pug`
          ul
          each item,index in props.list
            li= item 
              button(onClick=()=>props.del(index))
                |del
  
  `
}

function Index() {

  const [list, setList] = React.useState(["learn react", "learn Engilish"]);
  const [input, setInput] = React.useState(""); 
  const del=index=>{
    list.splice(index,1)
     setList([...list])  
  }
  return pug`
      input(onChange=(e) => setInput(e.target.value))
      button(onClick=()=>setList([...list, input]))
        |add 
      Ul(list=list del=del)
  `;
 
}
export default Index;