在formik内部使用typeahead,并且很坚韧为react-bootstrap-typeahead添加fa-Angular 向上和fa-Angular 向下图标,如下图所示
相反,我有如下问题(它应该看起来像上面的图像)
代码:https://codesandbox.io/s/formik-example-forked-8m6o6
l3zydbqr1#
你能检查一下下面的代码链接吗?希望它能为你工作。我们添加了一个元素custom-dropdown,并把FontAwesomeIcon和Typeahead元素放在里面。在.custom-dropdown中,我们设置position: relative;和在.fa-angle-down中,我们设置了position: absolute;,并根据您的要求设置其位置。请参考此链接:https://codesandbox.io/s/formik-example-forked-uupel
custom-dropdown
.custom-dropdown
position: relative;
.fa-angle-down
position: absolute;
qeeaahzv2#
给你。
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> </>
.typeaheadStyles{ align-items: center; padding: 12px 16px; background-color: "gray"; display: flex; justify-content: end; }
2条答案
按热度按时间l3zydbqr1#
你能检查一下下面的代码链接吗?希望它能为你工作。我们添加了一个元素
custom-dropdown
,并把FontAwesomeIcon和Typeahead元素放在里面。在
.custom-dropdown
中,我们设置position: relative;
和在
.fa-angle-down
中,我们设置了position: absolute;
,并根据您的要求设置其位置。请参考此链接:https://codesandbox.io/s/formik-example-forked-uupel
qeeaahzv2#
给你。