Question

我正在使用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”字段）？

Answer 1

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

考虑在这里使用受控组件。使用onUpdateInput事件将用户输入设置为状态，并使用<AutoComplete/>道具将状态中的值传递给searchText。当用户单击清除按钮时，清除状态中的输入。

P.S。我使用FlatButton作为清楚。您也可以使用IconButton。

希望这有帮助！

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

1 个答案: