React（4）

要求：

1、获取输入框值

2、点击按钮将数据写入数组中（前端实现不通过接口）

3、发送成功后清空输入框以及聚焦

实现：

设置一个变量收集输入框数据使用useState方法

  const [inputV,setInputV]=useState('')

输入框进行绑定输入值  和ref对象

获取输入框的dom对象 调用focus方法

 const inputref=useRef(null)

<input  type="text" 
        ref={inputref}
        placeholder="请输入评论" 
        value={inputV}
        onChange={(e)=>setInputV(e.target.value)}/>

onChange事件获取value值

点击确认按钮修改数据

这里仅实现添加进数组，实际为接口发送数据进行二次调用 

 <button onClick={handleList}>发送</button>

  function handleList(){
    setCommitList([
      ...commitList,
      {  id: 66, 
         username: "ddName",
         content:inputV,
         ctime: "12-12 05:15",
         number: 3333 }
    ])
 // 清空输入框内容
    setInputV('')
    // 重新聚焦  获取dom  focus
    inputref.current.focus()
  }