Coveo Atomic React Wrapper - 如何在搜索框上设置占位符文本？

Question

我们正在使用@coveo/atomic-react 1.2.2。由于非 React 元素与我们的 NodeJS 解决方案不兼容，因此需要 React 包装器。

我们需要能够更改 AtomicSearchBox 上的占位符文本。在所有位置，它默认显示“搜索”，并且添加占位符属性不会执行任何操作。如何更改占位符文本？

<AtomicSearchBox placeholder="Search by location name or zipcode">
    <AtomicSearchBoxQuerySuggestions maxWithQuery={5} />
    <AtomicSearchBoxRecentQueries maxWithQuery={5} />
</AtomicSearchBox>

Answer 1

解决方案是在包装上设置本地化

AtomicSearchInterface

:

<AtomicSearchInterface
        engine={searchEngine}
        language="en"
        // eslint-disable-next-line @typescript-eslint/no-explicit-any
        localization={(i18n: any) => {
          i18n.addResourceBundle('en', 'translation', {
            search: 'Custom Search Placeholder',
          });
        }}
      >

请注意，对于 Typescript，我必须在本地化行上禁用 eslint 以允许输入 i18n

any