Fix button two-chinese-words update bug

components/button/__tests__/index.test.js

@@ -28,6 +28,24 @@ describe('Button', () => {
     expect(wrapper2).toMatchSnapshot();
   });
 
+  it('renders Chinese characters correctly in HOC', () => {
+    const Text = props => <span>{props.children}</span>;
+    const wrapper = mount(
+      <Button><Text>按钮</Text></Button>
+    );
+    expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
+    wrapper.setProps({
+      children: <Text>大按钮</Text>,
+    });
+    wrapper.update();
+    expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(false);
+    wrapper.setProps({
+      children: <Text>按钮</Text>,
+    });
+    wrapper.update();
+    expect(wrapper.find('.ant-btn').hasClass('ant-btn-two-chinese-chars')).toBe(true);
+  });
+
   it('have static perperty for type detecting', () => {
     const wrapper = mount(
       <Button>Button Text</Button>

components/button/button.tsx

@@ -95,13 +95,7 @@ export default class Button extends React.Component<ButtonProps, any> {
   }
 
   componentDidMount() {
-    // Fix for HOC usage like <FormatMessage />
+    this.fixTwoCNChar();
-    const buttonText = (findDOMNode(this) as HTMLElement).innerText;
-    if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
-      this.setState({
-        hasTwoCNChar: true,
-      });
-    }
   }
 
   componentWillReceiveProps(nextProps: ButtonProps) {
@@ -119,6 +113,10 @@ export default class Button extends React.Component<ButtonProps, any> {
     }
   }
 
+  componentDidUpdate() {
+    this.fixTwoCNChar();
+  }
+
   componentWillUnmount() {
     if (this.timeout) {
       clearTimeout(this.timeout);
@@ -128,6 +126,23 @@ export default class Button extends React.Component<ButtonProps, any> {
     }
   }
 
+  fixTwoCNChar() {
+    // Fix for HOC usage like <FormatMessage />
+    const node = (findDOMNode(this) as HTMLElement);
+    const buttonText = node.textContent || node.innerText;
+    if (this.isNeedInserted() && isTwoCNChar(buttonText)) {
+      if (!this.state.hasTwoCNChar) {
+        this.setState({
+          hasTwoCNChar: true,
+        });
+      }
+    } else if (this.state.hasTwoCNChar) {
+      this.setState({
+        hasTwoCNChar: false,
+      });
+    }
+  }
+
   handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
     // Add click effect
     this.setState({ clicked: true });