React移动端Antd的input框搜索跳转之后返回保留搜索内容

搜了很多资料，大部分人都是用Form包起来使用，但还是有问题

我这边是使用了：

sessionStorage.setItem("searchData",searchData) 在Session Storage进行存储

首先使用useRef对Input进行挂载，然后再input的onChange事件中进行存储值

跳转返回之后在useEffect中进行sessionStorage.getItem来获取存储的值，进行input的赋值，然后再清空

这边有个重点！！！！

我这边是用 <Input   ref={myInput}  />进行对组件的挂载

myInput.current.input中有个属性是defaultValue和innerText属性

 myInput.current中有个属性是focus属性

在移动端中我们当然要自动聚焦input框（如果没有这个要求，只能说产品经理太敷衍了）

如果先聚焦再赋值是没问题的，这边就出现了问题，如果先赋值在聚焦Input,input中的内容就会清空，就会出现bug，这边顺序要理清

这边有两种input赋值的方法

第一种 

使用input的双向绑定  通过input的value属性用hooks 来进行赋值setSearchValue(searchData)

第二种

直接使用ref的挂载来进行赋值  myInput.current.input.defaultValue=searchData

我在这边还加了两个功能：

第一个就是由于我这边的input带有搜索功能，点击可以跳转，如果你第一次返回是正常的，已经给你赋值并且聚焦了，但如果你不触发onChange事件，我这边由于每次会清空sessionStorage,

所以在跳转事件上我们还要进行一次sessionStorage的赋值，这样就可以保证就算返回之后没有触发onChange事件继续点击上次搜索出来的其他内容，之后的无数次点击跳转就不会出现没有内容回显的问题

第二个是这个搜索事件要在useEffect中加入并且通过hooks再onChange事件中进行赋值，这样我们就可以输入框输入之后搜索出来的东西在跳转之后返回还是原来那些搜索到的内容

接下来上代码

import React, { useEffect, useState ,useRef} from "react";
 


const myInput = useRef()
//存储input的值
  const [searchValue, setSearchValue] = useState(undefined);
//onChange触发的事件  
const onSearch = (e) => {
    console.log(e,'myInput.current');
    setSearchValue(e);
    let searchData = JSON.stringify(e)
    sessionStorage.setItem("searchData",searchData);
  };

//增加点击跳转事件，由于跳转之后sessionStorage会清空，这边在跳转之前再存一次
  const onClickFunc = (props) => {
    let searchData = JSON.stringify(searchValue)
    sessionStorage.setItem("searchData",searchData);
    history.push(`/mobile/viewPage/${props.parent_id}/${props.fid}`)
  };
//每次进入页面如果有存的值就先赋值再聚焦，如果没有直接聚焦
useEffect(()=>{
    let searchData = JSON.parse(sessionStorage.getItem('searchData'));
    if(searchData){
      myInput.current.focus()
      onSearch(searchData)
     //给input赋值 还可以直接用setSearchValue(searchData)来进行赋值
      myInput.current.input.defaultValue=searchData;
      sessionStorage.removeItem("searchData");
    }else{
      myInput.current.focus()
    }

  // },100) 
},[])

<Input
          onChange={(e)=>onSearch(e.target.value)}
          ref={myInput}
          value={searchValue}
        />