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

【问题标题】：How to add a clear button to the auto complete field in material-ui如何在material-ui中的自动完成字段中添加清除按钮
【发布时间】：2017-03-07 06:40:19
【问题描述】：

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

由于 AutoComplete 使用 TextField，所以我想将 ListItem 或 MenuItem 赋予 TextField 的“值”并使用 rightIcon(Button)。但是 AutoComplete 只允许 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>}
/>

但是这样，清除图标会出现在自动完成输入字段的后面，我真的不需要/想要列表（项目）。

还有其他解决这个问题的想法吗？或者是否为未来版本的 Material-UI 计划了 clear-function（或更通用的“rightIconButton”字段）？

【问题讨论】：

标签： reactjs react-jsx material-ui

【解决方案1】：

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

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

附：我使用 FlatButton 作为清除。您也可以使用 IconButton。

希望这会有所帮助！

【讨论】：

您好 Pranesh，感谢您的建议。我之前尝试过这个，它可以工作，但前提是用户真的在该字段中输入了一些内容。但是，当我还设置 openOnFocus={true} （我似乎忘记了上面的这一点）并且用户单击列表中的一个条目（不输入任何字母）时，不会触发 onUpdateInput，因此状态不会改变，这会导致按钮不工作，因为它也不会改变状态。
我遇到了同样的问题。无法清除该字段。它通过您提供的解决方案起作用。谢谢！我已经拉了几个小时的头发了。