我們如何在AutoComplete Material-UI的onBlur中調用onNewRequest屬性？

Question

目前我正在使用Material-UI，並且我在AutoComplete字段中使用onNewRequest屬性，但onNewRequest僅在Enter上觸發，或者當選擇值時，我希望即使在外部單擊時（即onBlur屬性）也要調用onNewRequest。這可能嗎？ 我需要驗證用戶是否從自動完成選項中進行選擇，否則會拋出錯誤，但如果用戶輸入任何值並在該字段外單擊，則會逃避驗證。

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

您可以使用onClose，直接從文檔引用它

回調函數，當菜單關閉解僱。

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; 

希望這個例子可以幫助。祝你好運！