中文输入未完成时不发送加载选项的请求

src/components/Input.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import {autobind} from '../utils/helper';
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  forwardedRef: React.Ref<HTMLInputElement>;
+}
+
+export interface InputState {
+  value: any;
+}
+
+class InputInner extends React.Component<InputProps, InputState> {
+  isOnComposition: boolean = false;
+  state = {value: this.props.value};
+
+  componentWillReceiveProps(nextProps: InputProps) {
+    if (this.props.value !== nextProps.value) {
+      this.setState({
+        value: nextProps.value
+      });
+    }
+  }
+
+  @autobind
+  handleComposition(e: React.CompositionEvent<HTMLInputElement>) {
+    this.isOnComposition = e.type !== 'compositionend';
+    if (!this.isOnComposition) {
+      this.handleChange(e as any);
+    }
+  }
+
+  @autobind
+  handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const {onChange} = this.props;
+    const value = e.currentTarget.value;
+
+    this.isOnComposition || (onChange && onChange(e));
+    this.setState({
+      value
+    });
+  }
+
+  render() {
+    const {forwardedRef, ...rest} = this.props;
+
+    return (
+      <input
+        {...rest}
+        value={this.state.value}
+        ref={forwardedRef}
+        onChange={this.handleChange}
+        onCompositionStart={this.handleComposition}
+        onCompositionUpdate={this.handleComposition}
+        onCompositionEnd={this.handleComposition}
+      />
+    );
+  }
+}
+
+export default React.forwardRef<HTMLInputElement>((props, ref) => {
+  return <InputInner {...props} forwardedRef={ref} />;
+}) as React.ReactType<React.InputHTMLAttributes<HTMLInputElement>>;

src/components/Select.tsx

@@ -22,6 +22,7 @@ import {highlight} from '../renderers/Form/Options';
 import {findDOMNode} from 'react-dom';
 import {ClassNamesFn, themeable} from '../theme';
 import Checkbox from './Checkbox';
+import Input from './Input';
 
 export interface Option {
   label?: string;
@@ -197,7 +198,6 @@ interface SelectState {
   inputValue: string;
   highlightedIndex: number;
   selection: Array<Option>;
-  composing: boolean;
 }
 
 export class Select extends React.Component<SelectProps, SelectState> {
@@ -245,13 +245,10 @@ export class Select extends React.Component<SelectProps, SelectState> {
     this.handleAddClick = this.handleAddClick.bind(this);
     this.handleEditClick = this.handleEditClick.bind(this);
     this.handleDeleteClick = this.handleDeleteClick.bind(this);
-    this.onCompositionStart = this.onCompositionStart.bind(this);
-    this.onCompositionEnd = this.onCompositionEnd.bind(this);
 
     this.state = {
       isOpen: false,
       isFocused: false,
-      composing: false,
       inputValue: '',
       highlightedIndex: -1,
       selection: value2array(props.value, props)
@@ -353,20 +350,6 @@ export class Select extends React.Component<SelectProps, SelectState> {
     this.props.onBlur && this.props.onBlur(e);
   }
 
-  // 输入中文未完成时不发送加载选项的请求
-  onCompositionStart(e: any) {
-    this.setState({
-      composing: true
-    });
-  }
-
-  onCompositionEnd(e: any) {
-    this.setState({
-      composing: false
-    });
-    this.handleInputChange(e);
-  }
-
   focus() {
     this.input
       ? this.input.focus()
@@ -424,7 +407,7 @@ export class Select extends React.Component<SelectProps, SelectState> {
       {
         inputValue: evt.currentTarget.value
       },
-      () => !this.state.composing && loadOptions && loadOptions(this.state.inputValue)
+      () => loadOptions && loadOptions(this.state.inputValue)
     );
   }
 
@@ -614,15 +597,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
             })}
           >
             <Icon icon="search" className="icon" />
-            <input
+            <Input
               {...getInputProps({
                 onFocus: this.onFocus,
                 onBlur: this.onBlur,
                 disabled: disabled,
                 placeholder: searchPromptText,
                 onChange: this.handleInputChange,
-                onCompositionStart: this.onCompositionStart,
-                onCompositionEnd: this.onCompositionEnd,
                 ref: this.inputRef
               })}
             />

src/renderers/Form/Text.tsx

@@ -9,6 +9,7 @@ import debouce = require('lodash/debounce');
 import {filter} from '../../utils/tpl';
 import find = require('lodash/find');
 import {Icon} from '../../components/icons';
+import Input from '../../components/Input';
 import {autobind, createObject, setVariable} from '../../utils/helper';
 import {isEffectiveApi} from '../../utils/api';
 
@@ -495,7 +496,7 @@ export default class TextControl extends React.PureComponent<
                   )
                 )}
 
-                <input
+                <Input
                   {...getInputProps({
                     name,
                     ref: this.inputRef,