Reactjs react redux can'；不改变输入值

我正在用react redux开发我的web应用程序

“输入标记”有一些问题

情况就是这样

我在输入标记中写入一些值

我单击图像标签，并在输入中弹出带有值的警报

弹出警报后，我无法更改输入标记的值

但如果我转到其他站点，然后再返回，我可以更改输入标记的值

我的代码如下

组件脚本

function Login_Topbar(props) {
  const searchvalue = useRef(null)
  return (
    <nav className='searchbar'>
        <div className='search'>
            <input type='text' placeholder='Search' name='search' 
            ref={searchvalue}
            ></input>
            <img src={require(`../image/search.png`)} 
            onClick={
              function(e){
                props.trysearch(searchvalue.current.value, searchvalue)
              }
            }
            ></img>
        </div>
    </nav>
  );
}
export default Login_Topbar;

function mapDispatchToProps(dispatch){
  return{
    trysearch: function(searchvalue, search){
      alert(searchvalue)
    }
  }
}

export default connect(null, mapDispatchToProps)(Login_Topbar)

---

我的代码中有问题吗？

更改React REF的值不会导致组件重新渲染，因此可能会留下过时的值。尝试使用React state代替输入值

function Login_Topbar(props) {
  const [searchvalue, setSearchValue] = useState("")

  return (
    <nav className='searchbar'>
        <div className='search'>
            <input type='text' placeholder='Search' name='search' 
            value={searchvalue}
            onChange={e => setSearchValue(e.target.value)}
            ></input>
            <img src={require(`../image/search.png`)} 
            onClick={
              function(e){
                props.trysearch(searchvalue)
              }
            }
            ></img>
        </div>
    </nav>
  );
}

export default Login_Topbar;

功能登录\u顶栏（道具）{
常量[searchvalue，setSearchValue]=useState（“”）
返回(
setSearchValue（e.target.value）}
>
);
}
导出默认登录\ u Topbar；

使用REF而不是输入值的状态的具体原因是什么？不是使用REF的具体原因。我现在就用react state试试，我已经解决了，但我还有一个关于警报弹出窗口的问题。我认为当我用回车键和ESC键关闭警报弹出窗口时，这两个是不同的。因为当我用ESC键关闭警报弹出窗口时，我不能更改输入标记中的值。你知道什么吗？我试过这个和这个作品。关于警报弹出窗口，我有一些不同的问题。如果我用ESC按钮关闭警报弹出窗口，浏览器认为警报弹出窗口仍然存在？太好了！如果这解决了你最初的问题，考虑把它标记为接受。我不确定弹出警报的问题。