如何移除Google Places自动补全输入框的关闭图标？

要移除默认关闭按钮、只保留你自定义的图标，有两种可靠的实现方式：

方法一：通过组件内置属性关闭默认清除按钮 #

这个组件底层基于react-select，默认开启了isClearable属性（值为true），这就是默认关闭按钮出现的核心原因。你只需要在selectProps里把它设为false，就能关掉默认按钮，同时保留自定义的renderRightButton：

import React, { useState } from 'react';
import GooglePlacesAutocomplete from 'react-google-places-autocomplete';

const Component = () => {
  const [value, setValue] = useState(null);

  const resetLocation = () => {
    setValue(null);
    // 这里可添加其他重置逻辑
  };

  return (
    <div>
      <GooglePlacesAutocomplete
        selectProps={{
          value,
          onChange: setValue,
          isClearable: false, // 关键配置：关闭默认清除按钮
        }}
        renderRightButton={() => <Icon name='remove' onPress={resetLocation}/>}
      />
    </div>
  );
};

方法二：通过CSS强制隐藏默认按钮 #

如果方法一因版本差异不生效，可以直接通过CSS定位默认按钮的类名来隐藏：

/* 隐藏react-select自带的清除按钮 */
.react-select__clear-indicator {
  display: none !important;
}

注意：类名可能随库版本略有变化，若找不到可通过浏览器开发者工具查看元素的实际类名。

优先推荐方法一，它通过组件官方属性控制，稳定性更强，不会因CSS类名变更失效。

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