输入超3字符触发setSearchValue后搜索框失焦，如何阻止？

触发setSearchValue时输入框失焦，大概率是组件发生了不必要的重渲染，或者SearchLocationInput内部逻辑因searchValue变化重置了焦点。以下是几种可行的解决办法：

方法1：避免无意义的组件重渲染 #

如果SearchLocationInput本身不依赖searchValue作为props，父组件重渲染会连带触发它的重渲染，进而导致焦点丢失。可以用React.memo包裹该组件，过滤掉无意义的props变化：

import React, { memo } from 'react';

// 用memo包裹自定义输入组件
const SearchLocationInput = memo((props) => {
  // 原组件内部逻辑
});

如果组件确实需要用到searchValue，可以在memo的第二个参数里自定义对比逻辑，确保只有关键props变化时才重渲染。

方法2：手动恢复输入框焦点 #

通过useRef获取输入框的DOM引用，在setSearchValue执行后手动调用焦点方法：

import React, { useRef } from 'react';

// 在组件内部定义ref
const inputRef = useRef(null);

const handleOnChange = (value) => {
    setLocalSearchValue(value);
    if (value.length >= 3) {
      debouncedGetPlaces(value);
      setSearchValue(value);
      // 触发状态更新后恢复焦点
      inputRef.current?.focus();
    }
    if (value.length < 3 && value.length > 0 && searchValue.length > 0) {
      setSearchValue('');
      inputRef.current?.focus();
    }
  };

// 给自定义输入组件绑定ref
return (
  <SearchLocationInput
    ref={inputRef}
    onBackPress={handleBack}
    onChangeText={handleOnChange}
    placeholder={placeHolder}
    value={localSearchValue}
  />
);

注意：如果SearchLocationInput是自定义组件，需要用forwardRef把ref传递到内部的原生输入元素上：

const SearchLocationInput = React.forwardRef((props, ref) => {
  return (
    <input
      ref={ref}
      {...props}
    />
  );
});

方法3：优化状态更新逻辑 #

检查setSearchValue的触发时机是否必要，比如可以合并重复的状态更新操作，或者延迟到防抖函数执行完毕后再更新searchValue，减少不必要的组件渲染次数。同时确保localSearchValue和searchValue的状态同步逻辑没有冲突，避免因状态不一致导致组件异常。

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