gpt4 book ai didi

reactjs - 如何在material-ui中的自动完成字段中添加清除按钮

转载 作者:行者123 更新时间:2023-12-03 14:21:08 25 4
gpt4 key购买 nike

我正在使用 Material-UIs AutoComplete 组件 (v0.15.4) 来实现某种过滤器。为了改善用户体验,我想在其内部或旁边添加一个清除按钮(图标按钮组件?),它只是清除当前输入(如 Google Specification for Auto-complete text fields 的图片中所示)。

由于自动完成使用 TextField,我想到将 ListItem 或 MenuItem 赋予 TextField 的“值”并使用 rightIcon(按钮)。但自动完成功能只允许 String 作为“SearchText”(内部用于填充 TextField 的“value”字段)。

因此,由于我无法将其他组件放入“searchText”中,我最终想到将 AutoComplete 包装在 ListItem 中,如下所示:

<ListItem
primaryText={<AutoComplete
dataSource={ dataSource }
filter={AutoComplete.fuzzyFilter}
hintText="Select Filter"
onNewRequest={this.handleSelect.bind(this)} />}
rightIconButton={<IconButton
onClick={this.handleClearClick.bind(this)}>
<ClearIcon />
</IconButton>}
/>

但是这样,清晰的图标就会出现在自动完成输入字段后面,我并不真正需要/想要列表(项目)。

还有其他办法可以解决这个问题吗?或者可能是为 future 版本的 Material-UI 计划的清除功能(或更通用的“rightIconButton”字段)?

最佳答案

工作笔:https://codepen.io/pranesh-r/pen/yawzbW?editors=0010

考虑在此处使用受控组件。使用 onUpdateInput 将用户输入设置为状态事件并将状态中的值传递给 <AutoComplete/>使用searchText Prop 。当用户点击清除按钮时,清除状态下的输入。

附注我使用 FlatButton 作为透明按钮。您还可以使用 IconButton。

希望这有帮助!

关于reactjs - 如何在material-ui中的自动完成字段中添加清除按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40236159/

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