React-Redux项目中输入框点击后无法修改值的问题排查

首先，咱们来拆解你遇到的问题：点击图片弹出alert后输入框无法编辑，切换页面返回又恢复正常。这个问题的核心原因和组件不必要的重复渲染以及非受控组件的特性有关，咱们一步步来看：

问题根源 #

你的组件用connect包裹后，mapDispatchToProps每次组件渲染时都会返回一个全新的trysearch函数——因为你是在函数内部定义的这个方法，每次调用mapDispatchToProps都会生成新的函数引用。这会导致组件的props每次都发生变化，触发组件频繁重新渲染。

而你使用的是非受控组件（通过useRef直接获取DOM输入值），虽然理论上非受控组件的值存在DOM中，和组件渲染无关，但在某些情况下，频繁的重新渲染可能会干扰浏览器对输入框DOM状态的管理，导致输入框意外进入无法编辑的状态。

至于切换页面后恢复正常，是因为切换页面时组件被完全卸载，返回时重新挂载，DOM元素被重新创建，之前的异常状态被彻底清除了。

解决方案 #

这里给你两个推荐的修复方案，优先选第一个，因为受控组件在React+Redux的场景下更可靠：

方案1：改为受控组件（推荐）

把输入框改成用状态管理值的受控组件，彻底避免非受控组件的潜在问题：

// 组件脚本修改
import { useState } from 'react';

function Login_Topbar(props) { 
  // 用useState管理输入框的值
  const [searchValue, setSearchValue] = useState('');

  const handleInputChange = (e) => {
    setSearchValue(e.target.value);
  };

  return ( 
    <nav className='searchbar'> 
      <div className='search'> 
        <input 
          type='text' 
          placeholder='Search' 
          name='search' 
          value={searchValue}
          onChange={handleInputChange}
        /> 
        <img 
          src={require(`../image/search.png`)} 
          onClick={() => props.trysearch(searchValue)} 
        /> 
      </div> 
    </nav> 
  ); 
} 
export default Login_Topbar;

容器脚本可以简化成对象形式（更简洁，且connect会自动处理函数的稳定性）：

// 容器脚本修改
const mapDispatchToProps = {
  trysearch: (searchvalue) => {
    alert(searchvalue);
    // 之后如果需要触发Redux action，直接在这里写dispatch逻辑即可
  }
};

export default connect(null, mapDispatchToProps)(Login_Topbar);

方案2：优化mapDispatchToProps，避免函数重复创建

如果你坚持用非受控组件，可以优化mapDispatchToProps，让trysearch函数保持稳定，避免组件频繁重新渲染：

// 容器脚本修改
function mapDispatchToProps(dispatch) {
  // 把trysearch定义成一个稳定的函数，避免每次生成新引用
  const trysearch = (searchvalue) => {
    alert(searchvalue);
  };
  return { trysearch };
}

export default connect(null, mapDispatchToProps)(Login_Topbar);

同时，记得去掉onClick里多余的searchvalue参数传递——你只需要传值就够了：

// 组件里的img onClick修改为
onClick={() => props.trysearch(searchvalue.current.value)}

小提示 #

在React+Redux的项目中，优先使用受控组件来处理表单输入，它的行为更可预测，也更容易和Redux的状态管理结合。非受控组件尽量只用在一些简单的、不需要和状态联动的场景里。

内容的提问来源于stack exchange，提问作者Charlie lee