material-uiのオートコンプリートフィールドにクリアボタンを追加する方法

Question

Material-UIオートコンプリートコンポーネント（v0.15.4）を使用してフィルタの種類を実装しています。ユーザーエクスペリエンスを向上させるために、現在の入力を単にクリアする（「Google Specification for Auto-complete text fields」の画像のように）クリアボタン（アイコンボタンコンポーネント？）をその内側またはそのすぐ隣に追加したいと考えています。

オートコンプリートはTextFieldを使用するので、TextFieldの "value"にListItemまたはMenuItemを与え、rightIcon（Button）を使用すると考えました。しかし、オートコンプリートではStringを "SearchText"（TextFieldの "value"フィールドを埋めるためにinternalyが使用する）としてのみ使用できます。

が

<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>} 
/> 

しかし、この方法は、明確なアイコンが背後に表示されます：

だから私は「検索テキスト」内の他のコンポーネントを置くことができないので、私はこのようなListItemの内部でオートコンプリートをラップするというアイデアで終わります自動完成入力フィールドと私は本当に必要としない/リスト（項目）が欲しい。

この問題を解決する他の考え方はありますか？または、将来のバージョンのMaterial-UIのために計画されたクリア関数（またはより一般的な "rightIconButton"フィールド）かもしれませんか？

Answer 1

ワーキングペン：https://codepen.io/pranesh-r/pen/yawzbW?editors=0010

ここ制御コンポーネントを使用することを検討してください。 onUpdateInputイベントを使用してユーザー入力を状態に設定し、小道具を使用して、状態の値を<AutoComplete/>に渡します。ユーザーがクリアボタンをクリックすると、その状態の入力をクリアします。

P.S.フラットボタンをクリアなものとして使用しました。 IconButtonを使用することもできます。

希望すると便利です。