如何保持 FluentUI SearchBox 保持图标固定？

问题描述

我在我的应用程序中使用 SearchBox。单击搜索框时，该图标将隐藏。我一直在寻找方法来拥有它。在 IconProps 中找不到我可以利用的相关属性

import React,{ useRef } from 'react';
import { SearchBox } from '@fluentui/react/lib/SearchBox';
import { Stack,IStackTokens } from '@fluentui/react/lib/Stack';

const stackTokens: Partial<IStackTokens> = { childrenGap: 20 };
const searchBoxRef = useRef();

/* eslint-disable react/jsx-no-bind */
export const SearchBoxFullSizeExample = () => {
  return (
    <Stack tokens={stackTokens}>
      <SearchBox placeholder="Search" onSearch={newValue => console.log('value is ' + newValue)} />
      <SearchBox
        placeholder="Search with no animation"
        onSearch={newValue => console.log('value is ' + newValue)}
        disableAnimation
       iconProps={{ iconName: 'Search',hidden: false,styles: { root: { display: 'block' },componentRef:{searchBoxRef}  }  }}
     onClick={ () => searchBoxRef.hidden = false }
      />
    </Stack>
  );
};

https://docs.microsoft.com/en-us/javascript/api/examples/searchbox?view=office-ui-fabric-react-latest

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）