是否可以在react-bootstrap-typeahead中自定义清除按钮的内容？

Question

使用react-bootstrap-typeahead是否可以更改清除按钮的内容？

我需要包含一个 FontAwesome 图标和“CLEAR”文本以匹配设计。

查看 [RBT] Custom Aux Components 演示，我可以看到 ClearButton 组件，但看不到如何自定义它。我尝试更改 label 道具，但这没有效果：

<ClearButton onClick={onClear} label="CLEAR" />

是否可以添加：

标签文字
一个 FontAwesome 图标

到清除按钮？

Answer 1

您无法自定义 ClearButton 本身，但您可以按照链接到的示例使用您自己的 clear/close 按钮组件：

<Typeahead ... >
  {({ onClear, selected }) => (
    <div className="rbt-aux">
      {!!selected.length && <MyCloseButton onClick={onClear} />}
    </div>
  )}
</Typeahead>

请注意 ClearButton 并没有什么特别之处；它只是将 Bootstrap 的 Close Button 的标记和类名封装到一个组件中。随意使用您自己的按钮！

是否可以在react-bootstrap-typeahead中自定义清除按钮的内容？

Is it possible to customize the contents of the Clear button in react-bootstrap-typeahead?

font-awesome

react-bootstrap-typeahead