come cancellare il testo in un campo di completamento automatico del materiale?

Question

Ho un campo di completamento automatico che utilizza

 searchText = {this.state.searchText} 

come questo;

 <AutoComplete 
     floatingLabelText='agent input' 
     ref='agentInput' 
     hintText="type response" 
     multiLine = {true} 
     fullWidth = {true} 
     searchText = {this.state.searchText} 
     onNewRequest={this.sendAgentInput} 
     dataSource={this.agentCommands} 
     /> 

ma quando aggiorno il this.setState({searchText: null }) sarà chiaro il completamento automatico una volta, ma non la seconda volta.

Non sono sicuro se si tratta di un errore o se esiste un altro modo per reimpostare il campo.

Ho anche provato a cercare il campo e ad aggiungere un ref ma senza fortuna.

presentato qui nel caso in cui si tratta di un bug https://github.com/callemall/material-ui/issues/2615

Answer 1

Prova anche a cambiare Testo di ricerca su ogni aggiornamento di ingresso:

onUpdateInput={this.handleUpdateInput} 

Questa funzione dovrebbe cambiare Testo di ricerca ogni volta utente cambia l'ingresso:

handleUpdateInput(text) { 
    this.setState({ 
    searchText: text 
    }) 
} 

My codice è come segue (ES6):

class MyComponent extends Component { 
    constructor (props) { 
    super(props) 

    this.dataSource = ['a', 'b' ,'c'] 
    this.state = { 
     searchText: '' 
    } 

    } 

    handleUpdateInput (t) { this.setState({ searchText: t }) } 

    handleSelect (t) { this.setState({ searchText: '' }) } 

    render() { 
    return <AutoComplete dataSource={this.dataSource} 
         searchText={this.state.searchText} 
         onNewRequest={this.handleSelect.bind(this)} 
         onUpdateInput={this.handleUpdateInput.bind(this)} 
    /> 
    }  
} 

qui voglio cancellare ingresso quando utente preme Invio o sceglie qualche elemento dalla lista (così posso eliminare Testo di ricerca in handleSelect), ma ho anche cambiare lo stato di searchText su ogni aggiornamento di input (handleUpdateInput).

Spero che funzionerà per voi!

Answer 2

Prova questa:

this.setState({ searchText: "\r" }); 

perché penso che la funzione deve verificare la lunghezza della stringa (bug?)