Wie können wir onNewRequest-Eigenschaft in onBlur in AutoComplete-Material-UI aufrufen?

Question

Derzeit verwende ich Material-UI und ich verwende die OnNewRequest -Eigenschaft im AutoVervollständigen Feld, aber die onNewRequest triggert nur beim Eingeben oder wenn ein Wert ausgewählt ist, möchte ich die onNewRequest aufrufen, auch wenn wir außerhalb klicken (z. B. onBlur -Eigenschaft). Ist das möglich? Ich muss überprüfen, ob ein Benutzer aus den Autovervollständigungsoptionen auswählt, andernfalls wird ein Fehler ausgegeben, aber wenn der Benutzer einen Wert eingibt und außerhalb des Felds klickt, wird die Validierung ignoriert.

import React, {Component} from 'react'; 
import AutoComplete from 'material-ui/AutoComplete'; 

const colors = [ 
    'Red', 
    'Orange', 
    'Yellow', 
    'Green', 
    'Blue', 
    'Purple', 
    'Black', 
    'White', 
]; 

export default class AutoCompleteExampleControlled extends Component { 
    state = { 
    errMsgMT: '', 
    }; 


    handleNewRequest = (content, index) => { 
    if(index == -1){ 
    this.setState({errMsgMT : "Error"}); 
    } 
    else{ 
    this.setState({errMsgMT : "Correct"}); 
    } 
    }; 

    render() { 
    return (
     <div> 
     <AutoComplete 
      hintText="Type 'r', case insensitive" 
      onNewRequest={this.handleNewRequest} 
      dataSource={colors} 
     /> 
     </div> 
    ); 
    } 
} 

Answer 1

können Sie verwenden onClose, zitiert sie direkt von doc

Callback-Funktion ausgelöst, wenn das Menü geschlossen.

import React from 'react'; 
import AutoComplete from 'material-ui/AutoComplete'; 

const colors = [ 
    'Red', 
    'Orange', 
    'Yellow', 
    'Green', 
    'Blue', 
    'Purple', 
    'Black', 
    'White', 
]; 

class AutoCompleteExample extends React.Component { 
constructor(props) { 
    super(props); 
    this.onMenuClose = this.onMenuClose.bind(this); 
} 
onMenuClose() { 
    console.log("event captured on clicking outside"); 
} 
render() { 
    return (
    <AutoComplete 
     dataSource={colors} 
     onClose={this.onMenuClose} 
    /> 
) 
} 
} 

export default AutoCompleteExample; 

Hoffen, dass dieses Beispiel hilft. Viel Glück!