From 58df74c38e5ab223f69940db30af47631e74aeac Mon Sep 17 00:00:00 2001
From: dingkang <dingkang0458@gmail.com>
Date: Sat, 14 May 2022 16:40:42 +0800
Subject: [PATCH] docs: replace class component with hooks (#35519)

* docs(badge): replace class component with hooks

* docs(button): replace class component with hooks

* docs(calendar): replace class component with hooks

* docs(card): replace class component with hooks

* docs(button): replace class component with hooks

* chore(deps): remove webpack devDependencies

* docs(cascader): replace class component with hooks

* docs(checkbox): replace class component with hooks

* docs(collapse): replace class component with hooks

* docs(comment): replace class component with hooks

* docs(descriptions): replace class component with hooks

* docs(config-provider): replace class component with hooks

* docs(date-picker): replace class component with hooks

* docs(drawer): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(dropdown): replace class component with hooks

* docs(empty): replace class component with hooks

* docs(grid): replace class component with hooks

* docs(input): replace class component with hooks

* docs(input-number): replace class component with hooks

* docs(demo): fix lint error
---
 components/drawer/demo/form-in-drawer.md     | 258 +++++++++---------
 components/drawer/demo/multi-level-drawer.md |  79 +++---
 components/drawer/demo/placement.md          |  84 +++---
 components/drawer/demo/render-in-current.md  |  62 ++---
 components/drawer/demo/user-profile.md       | 266 +++++++++----------
 components/dropdown/demo/loading.md          |  80 +++---
 components/dropdown/demo/overlay-visible.md  |  81 +++---
 components/empty/demo/config-provider.md     |  99 ++++---
 components/grid/demo/playground.md           | 141 +++++-----
 components/input-number/demo/disabled.md     |  40 ++-
 components/input/demo/autosize-textarea.md   |  55 ++--
 components/input/demo/textarea-resize.md     |  35 +--
 components/input/demo/tooltip.md             |  78 +++---
 13 files changed, 621 insertions(+), 737 deletions(-)

diff --git a/components/drawer/demo/form-in-drawer.md b/components/drawer/demo/form-in-drawer.md
index 821842a87c..a79cecffee 100644
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@@ -19,144 +19,136 @@ import { PlusOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 
-class DrawerForm extends React.Component {
-  state = { visible: false };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
 
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+  const showDrawer = () => {
+    setVisible(true);
   };
 
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
 
-  render() {
-    return (
-      <>
-        <Button type="primary" onClick={this.showDrawer} icon={<PlusOutlined />}>
-          New account
-        </Button>
-        <Drawer
-          title="Create a new account"
-          width={720}
-          onClose={this.onClose}
-          visible={this.state.visible}
-          bodyStyle={{ paddingBottom: 80 }}
-          extra={
-            <Space>
-              <Button onClick={this.onClose}>Cancel</Button>
-              <Button onClick={this.onClose} type="primary">
-                Submit
-              </Button>
-            </Space>
-          }
-        >
-          <Form layout="vertical" hideRequiredMark>
-            <Row gutter={16}>
-              <Col span={12}>
-                <Form.Item
-                  name="name"
-                  label="Name"
-                  rules={[{ required: true, message: 'Please enter user name' }]}
-                >
-                  <Input placeholder="Please enter user name" />
-                </Form.Item>
-              </Col>
-              <Col span={12}>
-                <Form.Item
-                  name="url"
-                  label="Url"
-                  rules={[{ required: true, message: 'Please enter url' }]}
-                >
-                  <Input
-                    style={{ width: '100%' }}
-                    addonBefore="http://"
-                    addonAfter=".com"
-                    placeholder="Please enter url"
-                  />
-                </Form.Item>
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col span={12}>
-                <Form.Item
-                  name="owner"
-                  label="Owner"
-                  rules={[{ required: true, message: 'Please select an owner' }]}
-                >
-                  <Select placeholder="Please select an owner">
-                    <Option value="xiao">Xiaoxiao Fu</Option>
-                    <Option value="mao">Maomao Zhou</Option>
-                  </Select>
-                </Form.Item>
-              </Col>
-              <Col span={12}>
-                <Form.Item
-                  name="type"
-                  label="Type"
-                  rules={[{ required: true, message: 'Please choose the type' }]}
-                >
-                  <Select placeholder="Please choose the type">
-                    <Option value="private">Private</Option>
-                    <Option value="public">Public</Option>
-                  </Select>
-                </Form.Item>
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col span={12}>
-                <Form.Item
-                  name="approver"
-                  label="Approver"
-                  rules={[{ required: true, message: 'Please choose the approver' }]}
-                >
-                  <Select placeholder="Please choose the approver">
-                    <Option value="jack">Jack Ma</Option>
-                    <Option value="tom">Tom Liu</Option>
-                  </Select>
-                </Form.Item>
-              </Col>
-              <Col span={12}>
-                <Form.Item
-                  name="dateTime"
-                  label="DateTime"
-                  rules={[{ required: true, message: 'Please choose the dateTime' }]}
-                >
-                  <DatePicker.RangePicker
-                    style={{ width: '100%' }}
-                    getPopupContainer={trigger => trigger.parentElement}
-                  />
-                </Form.Item>
-              </Col>
-            </Row>
-            <Row gutter={16}>
-              <Col span={24}>
-                <Form.Item
-                  name="description"
-                  label="Description"
-                  rules={[
-                    {
-                      required: true,
-                      message: 'please enter url description',
-                    },
-                  ]}
-                >
-                  <Input.TextArea rows={4} placeholder="please enter url description" />
-                </Form.Item>
-              </Col>
-            </Row>
-          </Form>
-        </Drawer>
-      </>
-    );
-  }
-}
-
-export default () => <DrawerForm />;
+  return (
+    <>
+      <Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>
+        New account
+      </Button>
+      <Drawer
+        title="Create a new account"
+        width={720}
+        onClose={onClose}
+        visible={visible}
+        bodyStyle={{ paddingBottom: 80 }}
+        extra={
+          <Space>
+            <Button onClick={onClose}>Cancel</Button>
+            <Button onClick={onClose} type="primary">
+              Submit
+            </Button>
+          </Space>
+        }
+      >
+        <Form layout="vertical" hideRequiredMark>
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item
+                name="name"
+                label="Name"
+                rules={[{ required: true, message: 'Please enter user name' }]}
+              >
+                <Input placeholder="Please enter user name" />
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                name="url"
+                label="Url"
+                rules={[{ required: true, message: 'Please enter url' }]}
+              >
+                <Input
+                  style={{ width: '100%' }}
+                  addonBefore="http://"
+                  addonAfter=".com"
+                  placeholder="Please enter url"
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item
+                name="owner"
+                label="Owner"
+                rules={[{ required: true, message: 'Please select an owner' }]}
+              >
+                <Select placeholder="Please select an owner">
+                  <Option value="xiao">Xiaoxiao Fu</Option>
+                  <Option value="mao">Maomao Zhou</Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                name="type"
+                label="Type"
+                rules={[{ required: true, message: 'Please choose the type' }]}
+              >
+                <Select placeholder="Please choose the type">
+                  <Option value="private">Private</Option>
+                  <Option value="public">Public</Option>
+                </Select>
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row gutter={16}>
+            <Col span={12}>
+              <Form.Item
+                name="approver"
+                label="Approver"
+                rules={[{ required: true, message: 'Please choose the approver' }]}
+              >
+                <Select placeholder="Please choose the approver">
+                  <Option value="jack">Jack Ma</Option>
+                  <Option value="tom">Tom Liu</Option>
+                </Select>
+              </Form.Item>
+            </Col>
+            <Col span={12}>
+              <Form.Item
+                name="dateTime"
+                label="DateTime"
+                rules={[{ required: true, message: 'Please choose the dateTime' }]}
+              >
+                <DatePicker.RangePicker
+                  style={{ width: '100%' }}
+                  getPopupContainer={trigger => trigger.parentElement}
+                />
+              </Form.Item>
+            </Col>
+          </Row>
+          <Row gutter={16}>
+            <Col span={24}>
+              <Form.Item
+                name="description"
+                label="Description"
+                rules={[
+                  {
+                    required: true,
+                    message: 'please enter url description',
+                  },
+                ]}
+              >
+                <Input.TextArea rows={4} placeholder="please enter url description" />
+              </Form.Item>
+            </Col>
+          </Row>
+        </Form>
+      </Drawer>
+    </>
+  );
+};
 ```
 
 ```css
diff --git a/components/drawer/demo/multi-level-drawer.md b/components/drawer/demo/multi-level-drawer.md
index f1be8f443c..63844c4568 100644
--- a/components/drawer/demo/multi-level-drawer.md
+++ b/components/drawer/demo/multi-level-drawer.md
@@ -16,65 +16,54 @@ Open a new drawer on top of an existing drawer to handle multi branch tasks.
 ```jsx
 import { Drawer, Button } from 'antd';
 
-class App extends React.Component {
-  state = { visible: false, childrenDrawer: false };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
+  const [childrenDrawer, setChildrenDrawer] = React.useState(false);
 
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+  const showDrawer = () => {
+    setVisible(true);
   };
 
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
 
-  showChildrenDrawer = () => {
-    this.setState({
-      childrenDrawer: true,
-    });
+  const showChildrenDrawer = () => {
+    setChildrenDrawer(true);
   };
 
-  onChildrenDrawerClose = () => {
-    this.setState({
-      childrenDrawer: false,
-    });
+  const onChildrenDrawerClose = () => {
+    setChildrenDrawer(false);
   };
 
-  render() {
-    return (
-      <>
-        <Button type="primary" onClick={this.showDrawer}>
-          Open drawer
+  return (
+    <>
+      <Button type="primary" onClick={showDrawer}>
+        Open drawer
+      </Button>
+      <Drawer
+        title="Multi-level drawer"
+        width={520}
+        closable={false}
+        onClose={onClose}
+        visible={visible}
+      >
+        <Button type="primary" onClick={showChildrenDrawer}>
+          Two-level drawer
         </Button>
         <Drawer
-          title="Multi-level drawer"
-          width={520}
+          title="Two-level Drawer"
+          width={320}
           closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
+          onClose={onChildrenDrawerClose}
+          visible={childrenDrawer}
         >
-          <Button type="primary" onClick={this.showChildrenDrawer}>
-            Two-level drawer
-          </Button>
-          <Drawer
-            title="Two-level Drawer"
-            width={320}
-            closable={false}
-            onClose={this.onChildrenDrawerClose}
-            visible={this.state.childrenDrawer}
-          >
-            This is two-level drawer
-          </Drawer>
+          This is two-level drawer
         </Drawer>
-      </>
-    );
-  }
-}
-
-export default App;
+      </Drawer>
+    </>
+  );
+};
 ```
 
 <style>
diff --git a/components/drawer/demo/placement.md b/components/drawer/demo/placement.md
index 36bf30339e..4645f0173e 100644
--- a/components/drawer/demo/placement.md
+++ b/components/drawer/demo/placement.md
@@ -16,58 +16,48 @@ The Drawer can appear from any edge of the screen.
 ```jsx
 import { Drawer, Button, Radio, Space } from 'antd';
 
-class App extends React.Component {
-  state = { visible: false, placement: 'left' };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
+  const [placement, setPlacement] = React.useState('left');
 
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+  const showDrawer = () => {
+    setVisible(true);
   };
 
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
 
-  onChange = e => {
-    this.setState({
-      placement: e.target.value,
-    });
+  const onChange = e => {
+    setPlacement(e.target.value);
   };
 
-  render() {
-    const { placement, visible } = this.state;
-    return (
-      <>
-        <Space>
-          <Radio.Group value={placement} onChange={this.onChange}>
-            <Radio value="top">top</Radio>
-            <Radio value="right">right</Radio>
-            <Radio value="bottom">bottom</Radio>
-            <Radio value="left">left</Radio>
-          </Radio.Group>
-          <Button type="primary" onClick={this.showDrawer}>
-            Open
-          </Button>
-        </Space>
-        <Drawer
-          title="Basic Drawer"
-          placement={placement}
-          closable={false}
-          onClose={this.onClose}
-          visible={visible}
-          key={placement}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Drawer>
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      <Space>
+        <Radio.Group value={placement} onChange={onChange}>
+          <Radio value="top">top</Radio>
+          <Radio value="right">right</Radio>
+          <Radio value="bottom">bottom</Radio>
+          <Radio value="left">left</Radio>
+        </Radio.Group>
+        <Button type="primary" onClick={showDrawer}>
+          Open
+        </Button>
+      </Space>
+      <Drawer
+        title="Basic Drawer"
+        placement={placement}
+        closable={false}
+        onClose={onClose}
+        visible={visible}
+        key={placement}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Drawer>
+    </>
+  );
+};
 ```
diff --git a/components/drawer/demo/render-in-current.md b/components/drawer/demo/render-in-current.md
index b165058c7c..d89b44c6a9 100644
--- a/components/drawer/demo/render-in-current.md
+++ b/components/drawer/demo/render-in-current.md
@@ -16,47 +16,39 @@ Render in current dom. custom container, check `getContainer`.
 ```jsx
 import { Drawer, Button } from 'antd';
 
-class App extends React.Component {
-  state = { visible: false };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
 
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+  const showDrawer = () => {
+    setVisible(true);
   };
 
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
 
-  render() {
-    return (
-      <div className="site-drawer-render-in-current-wrapper">
-        Render in this
-        <div style={{ marginTop: 16 }}>
-          <Button type="primary" onClick={this.showDrawer}>
-            Open
-          </Button>
-        </div>
-        <Drawer
-          title="Basic Drawer"
-          placement="right"
-          closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
-          getContainer={false}
-          style={{ position: 'absolute' }}
-        >
-          <p>Some contents...</p>
-        </Drawer>
+  return (
+    <div className="site-drawer-render-in-current-wrapper">
+      Render in this
+      <div style={{ marginTop: 16 }}>
+        <Button type="primary" onClick={showDrawer}>
+          Open
+        </Button>
       </div>
-    );
-  }
-}
-
-export default App;
+      <Drawer
+        title="Basic Drawer"
+        placement="right"
+        closable={false}
+        onClose={onClose}
+        visible={visible}
+        getContainer={false}
+        style={{ position: 'absolute' }}
+      >
+        <p>Some contents...</p>
+      </Drawer>
+    </div>
+  );
+};
 ```
 
 ```css
diff --git a/components/drawer/demo/user-profile.md b/components/drawer/demo/user-profile.md
index a87081d9f6..b89c4c67a6 100644
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@@ -23,151 +23,137 @@ const DescriptionItem = ({ title, content }) => (
   </div>
 );
 
-class App extends React.Component {
-  state = { visible: false };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
 
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+  const showDrawer = () => {
+    setVisible(true);
   };
 
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
   };
 
-  render() {
-    return (
-      <>
-        <List
-          dataSource={[
-            {
-              name: 'Lily',
-            },
-            {
-              name: 'Lily',
-            },
-          ]}
-          bordered
-          renderItem={item => (
-            <List.Item
-              key={item.id}
-              actions={[
-                <a onClick={this.showDrawer} key={`a-${item.id}`}>
-                  View Profile
-                </a>,
-              ]}
-            >
-              <List.Item.Meta
-                avatar={
-                  <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
-                }
-                title={<a href="https://ant.design/index-cn">{item.name}</a>}
-                description="Progresser XTech"
-              />
-            </List.Item>
-          )}
-        />
-        <Drawer
-          width={640}
-          placement="right"
-          closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
-        >
-          <p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
-            User Profile
-          </p>
-          <p className="site-description-item-profile-p">Personal</p>
-          <Row>
-            <Col span={12}>
-              <DescriptionItem title="Full Name" content="Lily" />
-            </Col>
-            <Col span={12}>
-              <DescriptionItem title="Account" content="AntDesign@example.com" />
-            </Col>
-          </Row>
-          <Row>
-            <Col span={12}>
-              <DescriptionItem title="City" content="HangZhou" />
-            </Col>
-            <Col span={12}>
-              <DescriptionItem title="Country" content="China🇨🇳" />
-            </Col>
-          </Row>
-          <Row>
-            <Col span={12}>
-              <DescriptionItem title="Birthday" content="February 2,1900" />
-            </Col>
-            <Col span={12}>
-              <DescriptionItem title="Website" content="-" />
-            </Col>
-          </Row>
-          <Row>
-            <Col span={24}>
-              <DescriptionItem
-                title="Message"
-                content="Make things as simple as possible but no simpler."
-              />
-            </Col>
-          </Row>
-          <Divider />
-          <p className="site-description-item-profile-p">Company</p>
-          <Row>
-            <Col span={12}>
-              <DescriptionItem title="Position" content="Programmer" />
-            </Col>
-            <Col span={12}>
-              <DescriptionItem title="Responsibilities" content="Coding" />
-            </Col>
-          </Row>
-          <Row>
-            <Col span={12}>
-              <DescriptionItem title="Department" content="XTech" />
-            </Col>
-            <Col span={12}>
-              <DescriptionItem title="Supervisor" content={<a>Lin</a>} />
-            </Col>
-          </Row>
-          <Row>
-            <Col span={24}>
-              <DescriptionItem
-                title="Skills"
-                content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."
-              />
-            </Col>
-          </Row>
-          <Divider />
-          <p className="site-description-item-profile-p">Contacts</p>
-          <Row>
-            <Col span={12}>
-              <DescriptionItem title="Email" content="AntDesign@example.com" />
-            </Col>
-            <Col span={12}>
-              <DescriptionItem title="Phone Number" content="+86 181 0000 0000" />
-            </Col>
-          </Row>
-          <Row>
-            <Col span={24}>
-              <DescriptionItem
-                title="Github"
-                content={
-                  <a href="http://github.com/ant-design/ant-design/">
-                    github.com/ant-design/ant-design/
-                  </a>
-                }
-              />
-            </Col>
-          </Row>
-        </Drawer>
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      <List
+        dataSource={[
+          {
+            name: 'Lily',
+          },
+          {
+            name: 'Lily',
+          },
+        ]}
+        bordered
+        renderItem={item => (
+          <List.Item
+            key={item.id}
+            actions={[
+              <a onClick={showDrawer} key={`a-${item.id}`}>
+                View Profile
+              </a>,
+            ]}
+          >
+            <List.Item.Meta
+              avatar={
+                <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />
+              }
+              title={<a href="https://ant.design/index-cn">{item.name}</a>}
+              description="Progresser XTech"
+            />
+          </List.Item>
+        )}
+      />
+      <Drawer width={640} placement="right" closable={false} onClose={onClose} visible={visible}>
+        <p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
+          User Profile
+        </p>
+        <p className="site-description-item-profile-p">Personal</p>
+        <Row>
+          <Col span={12}>
+            <DescriptionItem title="Full Name" content="Lily" />
+          </Col>
+          <Col span={12}>
+            <DescriptionItem title="Account" content="AntDesign@example.com" />
+          </Col>
+        </Row>
+        <Row>
+          <Col span={12}>
+            <DescriptionItem title="City" content="HangZhou" />
+          </Col>
+          <Col span={12}>
+            <DescriptionItem title="Country" content="China🇨🇳" />
+          </Col>
+        </Row>
+        <Row>
+          <Col span={12}>
+            <DescriptionItem title="Birthday" content="February 2,1900" />
+          </Col>
+          <Col span={12}>
+            <DescriptionItem title="Website" content="-" />
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <DescriptionItem
+              title="Message"
+              content="Make things as simple as possible but no simpler."
+            />
+          </Col>
+        </Row>
+        <Divider />
+        <p className="site-description-item-profile-p">Company</p>
+        <Row>
+          <Col span={12}>
+            <DescriptionItem title="Position" content="Programmer" />
+          </Col>
+          <Col span={12}>
+            <DescriptionItem title="Responsibilities" content="Coding" />
+          </Col>
+        </Row>
+        <Row>
+          <Col span={12}>
+            <DescriptionItem title="Department" content="XTech" />
+          </Col>
+          <Col span={12}>
+            <DescriptionItem title="Supervisor" content={<a>Lin</a>} />
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <DescriptionItem
+              title="Skills"
+              content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."
+            />
+          </Col>
+        </Row>
+        <Divider />
+        <p className="site-description-item-profile-p">Contacts</p>
+        <Row>
+          <Col span={12}>
+            <DescriptionItem title="Email" content="AntDesign@example.com" />
+          </Col>
+          <Col span={12}>
+            <DescriptionItem title="Phone Number" content="+86 181 0000 0000" />
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24}>
+            <DescriptionItem
+              title="Github"
+              content={
+                <a href="http://github.com/ant-design/ant-design/">
+                  github.com/ant-design/ant-design/
+                </a>
+              }
+            />
+          </Col>
+        </Row>
+      </Drawer>
+    </>
+  );
+};
 ```
 
 ```css
diff --git a/components/dropdown/demo/loading.md b/components/dropdown/demo/loading.md
index 3df50c39cd..c0b7abb88e 100644
--- a/components/dropdown/demo/loading.md
+++ b/components/dropdown/demo/loading.md
@@ -27,52 +27,48 @@ const menu = (
     ]}
   />
 );
-class App extends React.Component {
-  state = {
-    loadings: [],
-  };
+export default () => {
+  const [loadings, setLodings] = React.useState([]);
 
-  enterLoading = index => {
-    const newLoadings = [...this.state.loadings];
+  const enterLoading = index => {
+    const newLoadings = [...loadings];
     newLoadings[index] = true;
-    this.setState({
-      loadings: newLoadings,
-    });
+    setLodings(newLoadings);
+
     setTimeout(() => {
-      newLoadings[index] = false;
-      this.setState({ loadings: newLoadings });
+      setLodings(prevLoadings => {
+        const temLoadings = [...prevLoadings];
+        temLoadings[index] = false;
+        return temLoadings;
+      });
     }, 6000);
   };
 
-  render() {
-    const { loadings } = this.state;
-    return (
-      <Space direction="vertical">
-        <Dropdown.Button type="primary" loading overlay={menu}>
-          Submit
-        </Dropdown.Button>
-        <Dropdown.Button type="primary" size="small" loading overlay={menu}>
-          Submit
-        </Dropdown.Button>
-        <Dropdown.Button
-          type="primary"
-          loading={loadings[0]}
-          overlay={menu}
-          onClick={() => this.enterLoading(0)}
-        >
-          Submit
-        </Dropdown.Button>
-        <Dropdown.Button
-          icon={<DownOutlined />}
-          loading={loadings[1]}
-          overlay={menu}
-          onClick={() => this.enterLoading(1)}
-        >
-          Submit
-        </Dropdown.Button>
-      </Space>
-    );
-  }
-}
-export default App;
+  return (
+    <Space direction="vertical">
+      <Dropdown.Button type="primary" loading overlay={menu}>
+        Submit
+      </Dropdown.Button>
+      <Dropdown.Button type="primary" size="small" loading overlay={menu}>
+        Submit
+      </Dropdown.Button>
+      <Dropdown.Button
+        type="primary"
+        loading={loadings[0]}
+        overlay={menu}
+        onClick={() => enterLoading(0)}
+      >
+        Submit
+      </Dropdown.Button>
+      <Dropdown.Button
+        icon={<DownOutlined />}
+        loading={loadings[1]}
+        overlay={menu}
+        onClick={() => enterLoading(1)}
+      >
+        Submit
+      </Dropdown.Button>
+    </Space>
+  );
+};
 ```
diff --git a/components/dropdown/demo/overlay-visible.md b/components/dropdown/demo/overlay-visible.md
index b4980aa8a0..c1b49ceee8 100644
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-visible.md
@@ -17,57 +17,48 @@ The default is to close the menu when you click on menu items, this feature can
 import { Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';
 
-class OverlayVisible extends React.Component {
-  state = {
-    visible: false,
-  };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
 
-  handleMenuClick = e => {
+  const handleMenuClick = e => {
     if (e.key === '3') {
-      this.setState({ visible: false });
+      setVisible(false);
     }
   };
 
-  handleVisibleChange = flag => {
-    this.setState({ visible: flag });
+  const handleVisibleChange = flag => {
+    setVisible(flag);
   };
 
-  render() {
-    const menu = (
-      <Menu
-        onClick={this.handleMenuClick}
-        items={[
-          {
-            label: 'Clicking me will not close the menu.',
-            key: '1',
-          },
-          {
-            label: 'Clicking me will not close the menu also.',
-            key: '2',
-          },
-          {
-            label: 'Clicking me will close the menu.',
-            key: '3',
-          },
-        ]}
-      />
-    );
-    return (
-      <Dropdown
-        overlay={menu}
-        onVisibleChange={this.handleVisibleChange}
-        visible={this.state.visible}
-      >
-        <a onClick={e => e.preventDefault()}>
-          <Space>
-            Hover me
-            <DownOutlined />
-          </Space>
-        </a>
-      </Dropdown>
-    );
-  }
-}
+  const menu = (
+    <Menu
+      onClick={handleMenuClick}
+      items={[
+        {
+          label: 'Clicking me will not close the menu.',
+          key: '1',
+        },
+        {
+          label: 'Clicking me will not close the menu also.',
+          key: '2',
+        },
+        {
+          label: 'Clicking me will close the menu.',
+          key: '3',
+        },
+      ]}
+    />
+  );
 
-export default () => <OverlayVisible />;
+  return (
+    <Dropdown overlay={menu} onVisibleChange={handleVisibleChange} visible={visible}>
+      <a onClick={e => e.preventDefault()}>
+        <Space>
+          Hover me
+          <DownOutlined />
+        </Space>
+      </a>
+    </Dropdown>
+  );
+};
 ```
diff --git a/components/empty/demo/config-provider.md b/components/empty/demo/config-provider.md
index b9d0194694..04c43270c9 100644
--- a/components/empty/demo/config-provider.md
+++ b/components/empty/demo/config-provider.md
@@ -36,67 +36,60 @@ const customizeRenderEmpty = () => (
 
 const style = { width: 200 };
 
-class Demo extends React.Component {
-  state = {
-    customize: false,
-  };
+export default () => {
+  const [customize, setCustomize] = React.useState(false);
 
-  render() {
-    const { customize } = this.state;
-    return (
-      <div>
-        <Switch
-          unCheckedChildren="default"
-          checkedChildren="customize"
-          checked={customize}
-          onChange={val => {
-            this.setState({ customize: val });
-          }}
-        />
+  return (
+    <div>
+      <Switch
+        unCheckedChildren="default"
+        checkedChildren="customize"
+        checked={customize}
+        onChange={value => {
+          setCustomize(value);
+        }}
+      />
 
-        <Divider />
+      <Divider />
 
-        <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
-          <div className="config-provider">
-            <h4>Select</h4>
-            <Select style={style} />
+      <ConfigProvider renderEmpty={customize && customizeRenderEmpty}>
+        <div className="config-provider">
+          <h4>Select</h4>
+          <Select style={style} />
 
-            <h4>TreeSelect</h4>
-            <TreeSelect style={style} treeData={[]} />
+          <h4>TreeSelect</h4>
+          <TreeSelect style={style} treeData={[]} />
 
-            <h4>Cascader</h4>
-            <Cascader style={style} options={[]} showSearch />
+          <h4>Cascader</h4>
+          <Cascader style={style} options={[]} showSearch />
 
-            <h4>Transfer</h4>
-            <Transfer />
+          <h4>Transfer</h4>
+          <Transfer />
 
-            <h4>Table</h4>
-            <Table
-              style={{ marginTop: 8 }}
-              columns={[
-                {
-                  title: 'Name',
-                  dataIndex: 'name',
-                  key: 'name',
-                },
-                {
-                  title: 'Age',
-                  dataIndex: 'age',
-                  key: 'age',
-                },
-              ]}
-            />
+          <h4>Table</h4>
+          <Table
+            style={{ marginTop: 8 }}
+            columns={[
+              {
+                title: 'Name',
+                dataIndex: 'name',
+                key: 'name',
+              },
+              {
+                title: 'Age',
+                dataIndex: 'age',
+                key: 'age',
+              },
+            ]}
+          />
 
-            <h4>List</h4>
-            <List />
-          </div>
-        </ConfigProvider>
-      </div>
-    );
-  }
-}
-
-export default Demo;
+          <h4>List</h4>
+          <List />
+        </div>
+      </ConfigProvider>
+    </div>
+  );
+};
 ```
 
 <style>
diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
index 9e00888147..8123b70a55 100644
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -30,90 +30,87 @@ const colCounts = {};
   colCounts[i] = value;
 });
 
-class App extends React.Component {
-  state = {
+export default () => {
+  const [state, setState] = React.useState({
     gutterKey: 1,
     vgutterKey: 1,
     colCountKey: 2,
+  });
+
+  const onGutterChange = gutterKey => {
+    setState({ ...state, gutterKey });
   };
 
-  onGutterChange = gutterKey => {
-    this.setState({ gutterKey });
+  const onVGutterChange = vgutterKey => {
+    setState({ ...state, vgutterKey });
   };
 
-  onVGutterChange = vgutterKey => {
-    this.setState({ vgutterKey });
+  const onColCountChange = colCountKey => {
+    setState({ ...state, colCountKey });
   };
 
-  onColCountChange = colCountKey => {
-    this.setState({ colCountKey });
-  };
-
-  render() {
-    const { gutterKey, vgutterKey, colCountKey } = this.state;
-    const cols = [];
-    const colCount = colCounts[colCountKey];
-    let colCode = '';
-    for (let i = 0; i < colCount; i++) {
-      cols.push(
-        <Col key={i.toString()} span={24 / colCount}>
-          <div>Column</div>
-        </Col>,
-      );
-      colCode += `  <Col span={${24 / colCount}} />\n`;
-    }
-    return (
-      <>
-        <span>Horizontal Gutter (px): </span>
-        <div style={{ width: '50%' }}>
-          <Slider
-            min={0}
-            max={Object.keys(gutters).length - 1}
-            value={gutterKey}
-            onChange={this.onGutterChange}
-            marks={gutters}
-            step={null}
-            tipFormatter={value => gutters[value]}
-          />
-        </div>
-        <span>Vertical Gutter (px): </span>
-        <div style={{ width: '50%' }}>
-          <Slider
-            min={0}
-            max={Object.keys(vgutters).length - 1}
-            value={vgutterKey}
-            onChange={this.onVGutterChange}
-            marks={vgutters}
-            step={null}
-            tipFormatter={value => vgutters[value]}
-          />
-        </div>
-        <span>Column Count:</span>
-        <div style={{ width: '50%', marginBottom: 48 }}>
-          <Slider
-            min={0}
-            max={Object.keys(colCounts).length - 1}
-            value={colCountKey}
-            onChange={this.onColCountChange}
-            marks={colCounts}
-            step={null}
-            tipFormatter={value => colCounts[value]}
-          />
-        </div>
-        <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
-          {cols}
-          {cols}
-        </Row>
-        Another Row:
-        <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
-        <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}\n${colCode}</Row>`}</pre>
-        <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
-      </>
+  const { gutterKey, vgutterKey, colCountKey } = state;
+  const cols = [];
+  const colCount = colCounts[colCountKey];
+  let colCode = '';
+  for (let i = 0; i < colCount; i++) {
+    cols.push(
+      <Col key={i.toString()} span={24 / colCount}>
+        <div>Column</div>
+      </Col>,
     );
+    colCode += `  <Col span={${24 / colCount}} />\n`;
   }
-}
 
-export default App;
+  return (
+    <>
+      <span>Horizontal Gutter (px): </span>
+      <div style={{ width: '50%' }}>
+        <Slider
+          min={0}
+          max={Object.keys(gutters).length - 1}
+          value={gutterKey}
+          onChange={onGutterChange}
+          marks={gutters}
+          step={null}
+          tipFormatter={value => gutters[value]}
+        />
+      </div>
+      <span>Vertical Gutter (px): </span>
+      <div style={{ width: '50%' }}>
+        <Slider
+          min={0}
+          max={Object.keys(vgutters).length - 1}
+          value={vgutterKey}
+          onChange={onVGutterChange}
+          marks={vgutters}
+          step={null}
+          tipFormatter={value => vgutters[value]}
+        />
+      </div>
+      <span>Column Count:</span>
+      <div style={{ width: '50%', marginBottom: 48 }}>
+        <Slider
+          min={0}
+          max={Object.keys(colCounts).length - 1}
+          value={colCountKey}
+          onChange={onColCountChange}
+          marks={colCounts}
+          step={null}
+          tipFormatter={value => colCounts[value]}
+        />
+      </div>
+      <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
+        {cols}
+        {cols}
+      </Row>
+      Another Row:
+      <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>
+      <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}\n${colCode}</Row>`}</pre>
+      <pre className="demo-code">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\n${colCode}</Row>`}</pre>
+    </>
+  );
+};
 ```
 
 ```css
diff --git a/components/input-number/demo/disabled.md b/components/input-number/demo/disabled.md
index 945ee75cc7..6141ced979 100644
--- a/components/input-number/demo/disabled.md
+++ b/components/input-number/demo/disabled.md
@@ -16,30 +16,22 @@ Click the button to toggle between available and disabled states.
 ```jsx
 import { InputNumber, Button } from 'antd';
 
-class App extends React.Component {
-  state = {
-    disabled: true,
+export default () => {
+  const [disabled, setDisabled] = React.useState(true);
+
+  const toggle = () => {
+    setDisabled(!disabled);
   };
 
-  toggle = () => {
-    this.setState({
-      disabled: !this.state.disabled,
-    });
-  };
-
-  render() {
-    return (
-      <>
-        <InputNumber min={1} max={10} disabled={this.state.disabled} defaultValue={3} />
-        <div style={{ marginTop: 20 }}>
-          <Button onClick={this.toggle} type="primary">
-            Toggle disabled
-          </Button>
-        </div>
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      <InputNumber min={1} max={10} disabled={disabled} defaultValue={3} />
+      <div style={{ marginTop: 20 }}>
+        <Button onClick={toggle} type="primary">
+          Toggle disabled
+        </Button>
+      </div>
+    </>
+  );
+};
 ```
diff --git a/components/input/demo/autosize-textarea.md b/components/input/demo/autosize-textarea.md
index 91e30b7147..351bfde3dd 100644
--- a/components/input/demo/autosize-textarea.md
+++ b/components/input/demo/autosize-textarea.md
@@ -18,37 +18,30 @@ import { Input } from 'antd';
 
 const { TextArea } = Input;
 
-class Demo extends React.Component {
-  state = {
-    value: '',
+export default () => {
+  const [value, setValue] = React.useState();
+
+  // eslint-disable-next-line @typescript-eslint/no-shadow
+  const onChange = ({ target: { value } }) => {
+    setValue(value);
   };
 
-  onChange = ({ target: { value } }) => {
-    this.setState({ value });
-  };
-
-  render() {
-    const { value } = this.state;
-
-    return (
-      <>
-        <TextArea placeholder="Autosize height based on content lines" autoSize />
-        <div style={{ margin: '24px 0' }} />
-        <TextArea
-          placeholder="Autosize height with minimum and maximum number of lines"
-          autoSize={{ minRows: 2, maxRows: 6 }}
-        />
-        <div style={{ margin: '24px 0' }} />
-        <TextArea
-          value={value}
-          onChange={this.onChange}
-          placeholder="Controlled autosize"
-          autoSize={{ minRows: 3, maxRows: 5 }}
-        />
-      </>
-    );
-  }
-}
-
-export default Demo;
+  return (
+    <>
+      <TextArea placeholder="Autosize height based on content lines" autoSize />
+      <div style={{ margin: '24px 0' }} />
+      <TextArea
+        placeholder="Autosize height with minimum and maximum number of lines"
+        autoSize={{ minRows: 2, maxRows: 6 }}
+      />
+      <div style={{ margin: '24px 0' }} />
+      <TextArea
+        value={value}
+        onChange={onChange}
+        placeholder="Controlled autosize"
+        autoSize={{ minRows: 3, maxRows: 5 }}
+      />
+    </>
+  );
+};
 ```
diff --git a/components/input/demo/textarea-resize.md b/components/input/demo/textarea-resize.md
index df79dfb1c1..79aad4842c 100644
--- a/components/input/demo/textarea-resize.md
+++ b/components/input/demo/textarea-resize.md
@@ -22,28 +22,17 @@ const { TextArea } = Input;
 const defaultValue =
   'The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows.';
 
-class Demo extends React.Component {
-  state = {
-    autoResize: false,
-  };
+export default () => {
+  const [autoResize, setAutoResize] = React.useState(false);
 
-  render() {
-    const { autoResize } = this.state;
-
-    return (
-      <>
-        <Button
-          onClick={() => this.setState({ autoResize: !autoResize })}
-          style={{ marginBottom: 16 }}
-        >
-          Auto Resize: {String(autoResize)}
-        </Button>
-        <TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
-        <TextArea allowClear style={{ width: 93 }} />
-      </>
-    );
-  }
-}
-
-export default Demo;
+  return (
+    <>
+      <Button onClick={() => setAutoResize(!autoResize)} style={{ marginBottom: 16 }}>
+        Auto Resize: {String(autoResize)}
+      </Button>
+      <TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
+      <TextArea allowClear style={{ width: 93 }} />
+    </>
+  );
+};
 ```
diff --git a/components/input/demo/tooltip.md b/components/input/demo/tooltip.md
index 34738c0340..5ba543b56c 100644
--- a/components/input/demo/tooltip.md
+++ b/components/input/demo/tooltip.md
@@ -20,18 +20,19 @@ function formatNumber(value) {
   return new Intl.NumberFormat().format(value);
 }
 
-class NumericInput extends React.Component {
-  onChange = e => {
-    const { value } = e.target;
+const NumericInput = props => {
+  const { value, onBlur, onChange } = props;
+
+  const handleChange = e => {
+    const inputValue = e.target.value;
     const reg = /^-?\d*(\.\d*)?$/;
-    if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') {
-      this.props.onChange(value);
+    if ((!isNaN(inputValue) && reg.test(inputValue)) || inputValue === '' || inputValue === '-') {
+      onChange(inputValue);
     }
   };
 
   // '.' at the end or only '-' in the input box.
-  onBlur = () => {
-    const { value, onBlur, onChange } = this.props;
+  const handleBlur = () => {
     let valueTemp = value;
     if (value.charAt(value.length - 1) === '.' || value === '-') {
       valueTemp = value.slice(0, -1);
@@ -42,50 +43,33 @@ class NumericInput extends React.Component {
     }
   };
 
-  render() {
-    const { value } = this.props;
-    const title = value ? (
-      <span className="numeric-input-title">{value !== '-' ? formatNumber(value) : '-'}</span>
-    ) : (
-      'Input a number'
-    );
-    return (
-      <Tooltip
-        trigger={['focus']}
-        title={title}
-        placement="topLeft"
-        overlayClassName="numeric-input"
-      >
-        <Input
-          {...this.props}
-          onChange={this.onChange}
-          onBlur={this.onBlur}
-          placeholder="Input a number"
-          maxLength={25}
-        />
-      </Tooltip>
-    );
-  }
-}
+  const title = value ? (
+    <span className="numeric-input-title">{value !== '-' ? formatNumber(value) : '-'}</span>
+  ) : (
+    'Input a number'
+  );
+  return (
+    <Tooltip trigger={['focus']} title={title} placement="topLeft" overlayClassName="numeric-input">
+      <Input
+        {...props}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        placeholder="Input a number"
+        maxLength={25}
+      />
+    </Tooltip>
+  );
+};
 
-class NumericInputDemo extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = { value: '' };
-  }
+export default () => {
+  const [value, setValue] = React.useState();
 
-  onChange = value => {
-    this.setState({ value });
+  const onChange = val => {
+    setValue(val);
   };
 
-  render() {
-    return (
-      <NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />
-    );
-  }
-}
-
-export default () => <NumericInputDemo />;
+  return <NumericInput style={{ width: 120 }} value={value} onChange={onChange} />;
+};
 ```
 
 ```css