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

Question

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

Answer 1

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

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

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

希望这有帮助!