React Native Elements自定义SearchBar如何正确传入handleTextChange

你遇到的输入失效问题来自SearchBarCustom内部的受控组件逻辑冲突：

• SearchBarCustom将value硬绑定到了自身内部的useState状态，当你从外部传入onChangeText={handleTextChange}时，原本内部绑定的setValue会被外部方法覆盖，导致内部维护的value始终停留在初始空字符串，永远不会随用户输入更新。
• React Native Elements的SearchBar是标准受控组件，一旦绑定的value值不随输入变化，用户敲入的内容会被强制重置为value的值，最终表现为完全无法输入。
• 原代码里{...props}展开在硬编码属性之后，虽然外部传入的onChangeText会覆盖内部的方法，但没有配套的value传递逻辑，状态完全不匹配。

推荐把SearchBarCustom改造成同时支持「内部自管理非受控模式」和「外部传入受控属性模式」的通用组件，再配合外部状态同步给GoogleAutoComplete的回调。

第一步：改造SearchBarCustom实现 #

将组件改成兼容受控/非受控的写法，把props展开放在前面，再统一处理value和onChangeText逻辑：

const SearchBarCustom = (props) => {
  // 内部维护默认状态，未传入外部受控属性时自行管理输入值
  const [internalValue, setInternalValue] = useState('');
  // 判断当前是否为外部传入的受控模式
  const isControlled = props.value !== undefined;
  // 受控模式下优先用外部传入的value，否则用内部状态
  const currentValue = isControlled ? props.value : internalValue;

  const handleChangeText = (text) => {
    // 优先执行外部传入的onChangeText回调
    props.onChangeText?.(text);
    // 非受控模式下才更新内部状态
    if (!isControlled) {
      setInternalValue(text);
    }
  };

  return (
    <SearchBar
      {...props}
      {/* 统一处理后的属性放在展开props之后，确保优先级正确 */}
      value={currentValue}
      onChangeText={handleChangeText}
    />
  );
};

第二步：外部使用时同步输入状态 #

GoogleAutoComplete提供的handleTextChange仅负责接收输入值、触发地点搜索请求，不会帮你维护输入框的显示内容，需要在搜索页面层面单独维护输入值状态：

1. 先在SearchScreen组件内引入useState维护输入文本：

const SearchScreen = ({}: StackNavigationProps<Routes, "SearchScreen">) => {
  // 新增：维护搜索输入框的文本状态
  const [searchInput, setSearchInput] = useState('');
  // ... 其余原有代码
}

2. 给SearchBarCustom传入value属性，同时在onChangeText里同步更新本地状态、调用handleTextChange：

<SearchBarCustom
  value={searchInput}
  onChangeText={(text) => {
    setSearchInput(text); // 同步更新输入值，保证输入框正常显示
    handleTextChange(text); // 调用GoogleAutoComplete的方法触发地点检索
  }}
  containerStyle={{ backgroundColor: '#f3f2f8'}}
  inputContainerStyle={{ backgroundColor: '#e3e3e9', height: 30}}
  placeholderTextColor = '#96969b'
  placeholder="Search"
  platform="ios"
/>

如果SearchBarCustom不需要支持自管理的非受控模式，直接改成纯透传组件即可，减少额外逻辑：

const SearchBarCustom = (props) => {
  return <SearchBar {...props} />;
};

后续外部使用时直接传入value和组合后的onChangeText即可，和上面的第二步逻辑一致。

额外优化提示：当前代码把SearchBarCustom定义在SearchScreen组件内部，父组件每次渲染都会重新创建该组件的类型，会导致输入框不必要的重挂载，也可能引发输入异常。建议将SearchBarCustom移到组件外部定义，减少无意义的重渲染。

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