react 无状态组件实现todolist Hook 无状态组件ref取表单的值

无状态组件ref取表单的值

//val就是dom
 <input type="text" ref={(val)=>value=val}/>
 console.log(value.value)

//需要使用Hook  16.8新增的
import React,{useState} from "react"

const Index = (props)=>{
    //useState可以在function定义的组件中设置一个局部状态，返回两个值
    //第一个是状态的名字，第二个为改变状态的方法
    let [list,setList]=useState([])
    let value=''
    let add=()=>{
        let arr = [...list]
        arr.push(value.value)
        value.value=""
        return arr;
    }
    let del =(i)=>{
        let arrs = [...list]
        arrs.splice(i,1)
        return arrs
    }
    return(
        <div>
            <h2>你好 react-redux</h2>
            <input type="text" ref={(val)=>value=val}/>
            //点击添加调用asetList方法  里面调用 add（）方法
            <button onClick={()=>setList(add())}>添加</button>
            {
                list.map((item,i)=>{
                    return(
                        <div key={i}>{item}
                        //点击添加调用asetList方法  里面调用 del()方法i为所删除索引
                        <button onClick={()=>setList(del(i))}>删除</button></div>
                    )
                })
            }
        </div>
    )
}

export default Index;