我正在使用Material-UIs AutoComplete Component(v0.15.4)来实现一种过滤器。为了改善用户体验,我想在其内部或旁边添加一个清除按钮(图标按钮组件?),它只是清除当前输入(如Google Specification for Auto-complete text fields的图片中所示)。
由于AutoComplete使用TextField,我想到将ListItem或MenuItem赋予TextField的“value”并使用rightIcon(Button)。但是AutoComplete只允许String作为“SearchText”(内部用于填充TextField的“value”字段)。
因为我不能在“searchText”中放入其他组件,所以我最终想到将ListIntem包装在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>}
/>
但是这样清晰的图标出现在自动完成输入字段后面,我真的不需要/想要列表(项目)。
还有其他想法解决这个问题吗?或者是为未来版本的Material-UI计划的明确功能(或更通用的“rightIconButton”字段)?
答案 0 :(得分:2)
工作笔:https://codepen.io/pranesh-r/pen/yawzbW?editors=0010
考虑在这里使用受控组件。使用onUpdateInput
事件将用户输入设置为状态,并使用<AutoComplete/>
道具将状态中的值传递给searchText
。当用户单击清除按钮时,清除状态中的输入。
P.S。我使用FlatButton作为清楚。您也可以使用IconButton。
希望这有帮助!