Как добавить кнопку очистки в поле автозаполнения в материале-ui

Question

Я использую компонент автокомплектующих материалов (v0.15.4) для реализации вида фильтра. Чтобы улучшить работу с пользователем, я хочу добавить кнопку очистки (компонент Icon Button?) Внутри или рядом с ней, которая просто очищает текущий вход (например, на снимках Google Specification for Auto-complete text fields).

Поскольку AutoComplete использует TextField, я думал о том, чтобы предоставить ListItem или MenuItem значение «значение» TextField и использовать rightIcon (Button). Но AutoComplete позволяет только String как «SearchText» (используется внутренняя функция, чтобы заполнить поле «значение» TextField).

Так, так как я не могу поставить другой компонент внутри «SearchText» Я заканчиваю с идеей обертывания автозаполнения внутри 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>} 
/> 

Но этот путь появляется ясно значок позади авто полное поле ввода, и мне действительно не нужен/нужен список (элемент).

Есть ли другая идея решения этой проблемы? Или, может быть, явная функция (или более общее поле «rightIconButton»), запланированное для будущей версии Material-UI?

Answer 1

Рабочая ручка: https://codepen.io/pranesh-r/pen/yawzbW?editors=0010

Рассмотрите возможность использования управляемого компонента здесь. Установите пользовательский ввод в состояние, используя событие onUpdateInput, и передайте значение в состоянии на <AutoComplete/>, используя опоры searchText. Когда пользователь нажимает кнопку очистки, очистите ввод в состоянии.

P.S. Я использовал FlatButton как ясный. Вы также можете использовать IconButton.

Надеюсь, это поможет!