Exposing onFocus and onBlur callback of Mention (#4164)

*  Expose `onFocus` and `onBlur` callback of Mention

 + close #4163

* add event arguments

components/mention/index.en-US.md

@@ -45,6 +45,8 @@ When need to mention someone or something.
 | value | core state of mention | EditorState | null |
 | placeHolder | placeholder of input | string | null |
 | getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative.  | Function() | () => document.body |
+| onFocus | Callback function called when mention component get focus |  function() | null |
+| onBlur | Callback function called when mention component blur | function() | nul |
 
 ### Nav props
 

components/mention/index.tsx

@@ -19,6 +19,8 @@ export interface MentionProps {
   prefix?: string;
   placeholder?: string;
   getSuggestionContainer?: Function;
+  onFocus?: Function;
+  onBlur?: Function;
 }
 
 export interface MentionState {
@@ -73,7 +75,22 @@ export default class Mention extends React.Component<MentionProps, MentionState>
       suggestions: filteredSuggestions,
     });
   }
-
+  onFocus = (ev) => {
+    this.setState({
+      focus: true,
+    });
+    if (this.props.onFocus) {
+      this.props.onFocus(ev);
+    }
+  }
+  onBlur = (ev) => {
+    this.setState({
+      focus: false,
+    });
+    if (this.props.onBlur) {
+      this.props.onBlur(ev);
+    }
+  }
   render() {
     const { className = '', prefixCls, loading } = this.props;
     const { suggestions, focus } = this.state;
@@ -91,8 +108,8 @@ export default class Mention extends React.Component<MentionProps, MentionState>
         className={cls}
         onSearchChange={this.onSearchChange}
         onChange={this.onChange}
-        onFocus={() => this.setState({ focus: true })}
-        onBlur={() => this.setState({ focus: false })}
+        onFocus={this.onFocus}
+        onBlur={this.onBlur}
         suggestions={suggestions}
         notFoundContent={notFoundContent}
       />

components/mention/index.zh-CN.md

@@ -45,6 +45,8 @@ title: Mention
 | defaultValue | 默认值 | EditorState, 可以用 Mention.toEditorState(text) 把文字转换成 EditorState | null |
 | value | 值 | EditorState | null |
 | getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位| Function() | () => document.body |
+| onFocus | 获得焦点时回调 |  function() | null |
+| onBlur | 失去焦点时回调 | function() | nul |
 
 ### Nav props