gpt4 book ai didi

Material ui autocomplete how to render options that do not have labels with icon(材质用户界面自动完成如何渲染没有带图标标签的选项)

转载 作者:bug小助手 更新时间:2023-10-24 21:21:31 30 4
gpt4 key购买 nike



My options structure is like below

我的期权结构如下




const options = 'option1', 'option2'];




I want to render option with icon like this:

我想使用如下图标来渲染选项:


enter image description here


My current code for renderOption is :

我目前的renderOption代码是:




renderOption = (options => {
return (
<Fragment>
<SearchIcon>
<img src = {searchIcon.svg}/>
</SearchIcon>
{options}
</Fragment>
)
})




But I got error:

但我弄错了:


enter image description here


Can anyone help me render options that don't have labels with icon?

有没有人可以帮我渲染没有图标标签的选项?


Thank you!

谢谢!


更多回答

Normally that icon indicates, where the user would have to click to start the search. Why do you want to use that icon for every option?

通常,该图标指示用户必须单击才能开始搜索的位置。为什么每个选项都要使用该图标?

优秀答案推荐

I cannot see your code in order to help you fix your issue according to your need, but you are close to where you needed to be, which is to utilize the renderOption props for <Autocomplete> component.

我看不到您的代码是为了帮助您根据需要修复问题,但您已经接近了所需的位置,即使用 组件的renderOption道具。


In this case, what you want to do is actually this

在这种情况下,您要做的实际上是


    <Autocomplete
renderOption={(props, option) => (
<li {...props}>
<SearchIcon />
{option.label}
</li>
)}
// ... and rest of the props
/>

See doc for renderOption API for Autocomplete here https://mui.com/material-ui/api/autocomplete/#Autocomplete-prop-renderOption

有关自动完成的renderOption API,请参阅此处https://mui.com/material-ui/api/autocomplete/#Autocomplete-prop-renderOption的文档


CodeSandbox demo: https://codesandbox.io/s/clever-goldberg-kqq5pq?file=/Demo.tsx

CodeSandbox演示:https://codesandbox.io/s/clever-goldberg-kqq5pq?文件=/Demo.tsx


更多回答

Thanks for your help! But my options structure is [option1, option2], it doesn't have a label. Then what should I put in "{option.label}" ?

谢谢你的帮忙!但我的期权结构是[option1,option2],它没有标签。那我应该在“{option.bel}”里填什么呢?

In that case, just option will suffice, because MUI automatically knows what is passed in for the autocomplete. I have updated the CodeSandbox demo that matches more to your scenario so you can refer to :)

在这种情况下,只要选项就足够了,因为MUI自动知道为自动完成传入了什么。我已经更新了与您的场景更匹配的CodeSandbox演示,因此您可以参考:)

30 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com