Ionic React中如何将IonSearchbar的Cancel按钮移动到右侧

问题根因 #

你当前的写法存在两个导致按钮位置异常的问题：

1. 你给<IonSearchbar>设置了slot="start"属性，该属性会让整个搜索栏组件固定在头部左侧区域，嵌套在它内部的自定义按钮会跟着搜索栏整体偏左，无法到达头部最右侧。
2. 自定义按钮嵌套在<IonSearchbar>内部时，slot="end"仅能让按钮对齐到搜索栏组件本身的右侧边缘，无法超出搜索栏的宽度范围。

解决方案 #

方案1：使用IonSearchbar自带的取消按钮（推荐）

IonSearchbar原生支持取消按钮，默认就在右侧，无需自定义组件，适配全平台样式，代码调整如下：

<IonHeader>
  <IonToolbar>
    {searchActive ? (
      <IonSearchbar
        showCancelButton="always"
        onIonCancel={() => setSearchActive(false)}
      />
    ) : null}
  </IonToolbar>
</IonHeader>

你可以按需调整showCancelButton的取值：always始终显示、focus仅在搜索框聚焦时显示、never不显示。

方案2：保留自定义Cancel按钮

如果你需要自定义按钮的样式、文案、交互逻辑，就把按钮从<IonSearchbar>内部移出，作为<IonToolbar>的直接子元素，直接设置slot="end"即可对齐到头部最右侧：

<IonHeader>
  <IonToolbar>
    {searchActive ? (
      <>
        <IonSearchbar slot="start" showCancelButton="never" />
        <IonButton 
          slot="end" 
          fill="clear" 
          onClick={() => setSearchActive(false)}
        >
          Cancel
        </IonButton>
      </>
    ) : null}
  </IonToolbar>
</IonHeader>

你当前出现问题的效果参考：

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