React+Antd输入框onChange更新状态时失焦问题求助

我太懂这种反复点聚焦才能输入的糟心体验了，别着急，咱们一步步排查解决。

先清理代码里的冗余操作 #

你在constructor里写了this.handleChange = this.handleChange.bind(this)，但同时用箭头函数定义了handleChange方法——箭头函数本身已经自动绑定了this，这行bind代码完全是多余的，先去掉它避免混淆逻辑。

最可能的核心原因：组件被重复创建 #

输入框每输一个字就失焦，最常见的情况是你的IndexMain组件被定义在了另一个组件的render函数内部。比如如果你的代码结构是这样的：

function ParentComponent() {
  // 每次ParentComponent渲染，都会重新定义IndexMain类
  class IndexMain extends React.Component {
    // 你的组件代码...
  }
  return <IndexMain />;
}

这种情况下，每次输入触发setState导致父组件重新渲染时，IndexMain都会被重新定义成一个全新的组件类，React会认为这是完全不同的组件，就会卸载旧组件再挂载新的——输入框自然就失去焦点了。

对应的解决方案 #

1. 把IndexMain组件移到父组件外部定义，确保它只被创建一次：

// 将IndexMain放在父组件外面，不要嵌套在render函数内部
class IndexMain extends React.Component { 
  constructor(props) { 
    super(props) 
    this.state = { username: '' } 
    // 移除多余的bind代码
    // this.handleChange = this.handleChange.bind(this) 
  } 
  handleChange = (event) => { 
    // 这里不需要event.persist()，因为已经直接取到了输入值
    // event.persist() 
    this.setState({ username: event.target.value }) 
  } 
  render() { 
    return( 
      <div> 
        <Input onChange={this.handleChange} value={this.state.username} /> 
      </div> 
    ) 
  }
}

function ParentComponent() {
  return <IndexMain />;
}

2. 如果必须在父组件内定义（不推荐），可以用useMemo（函数组件场景）来缓存组件类，避免重复创建，但这种方式复杂度更高，优先推荐第一种方案。

额外检查点 #

• 确保Input组件的key值不是动态生成的（比如用随机数），如果key每次渲染都变化，也会导致组件重新挂载失焦。
• 排查是否有其他代码在setState后强制修改了焦点，比如某些自动聚焦的逻辑。

调整后应该就能正常连续输入了～

内容的提问来源于stack exchange，提问作者Firdaus Ansari