react-bootstrap-typeahead 中的 angledown 图标

Question

在 formik 中使用 typeahead 并且很难为 react-bootstrap-typeahead 添加 fa-angle-up 和 fa-angle-down 图标，如下图所示

相反，我有如下问题（它应该看起来像上图）

代码： https://codesandbox.io/s/formik-example-forked-8m6o6

Answer 1

你能检查下面的代码链接吗？ 希望它对你有用。 我们添加了一个元素custom-dropdown并将 FontAwesomeIcon 和 Typeahead 元素放入其中。

在.custom-dropdown我们设置position: relative; 和

在.fa-angle-down我们设置position: absolute; 并根据您的要求设置其 position。

请参考此链接： https://codesandbox.io/s/formik-example-forked-uupel

Answer 2

给你 go。

反应进口：

import { TiArrowSortedDown } from 'react-icons/ti';

反应返回声明：

   <>          
    <div className={styles.typeaheadStyles}>
    <Typeahead
        className={...}
        onChange={(event)=>handleChange(event)}
        onInputChange={(event)=>handleInputChange(event)}
        key={...}
        id={...}
        options={optionsArray}
        flip
        defaultSelected={defaultArray}
    />
   <TiArrowSortedDown className={styles.arrowDown} />
   </div>      
   </>

CSS：

.typeaheadStyles{
    align-items: center;
    padding: 12px 16px;
    background-color: "gray";
    display: flex;
    justify-content: end;

}