docs: replace class component with hooks (ant-design#35613)

* 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 * docs(layout): replace class component with hooks * docs(list): replace class component with hooks * docs(mentions): replace class component with hooks * docs: fix code review issue * docs(modal): replace class component with hooks
NE-SmallTown · May 18, 2022 · 85ee2a8 · 85ee2a8
1 parent ea3768f
commit 85ee2a8
Show file tree

Hide file tree

Showing 6 changed files with 465 additions and 541 deletions.
diff --git a/components/modal/demo/button-props.md b/components/modal/demo/button-props.md
@@ -16,51 +16,41 @@ Passing `okButtonProps` and `cancelButtonProps` will customize the OK button and
 ```jsx
 import { Modal, Button } from 'antd';
 
-class App extends React.Component {
-  state = { visible: false };
+export default () => {
+  const [visible, setVisible] = React.useState(false);
 
-  showModal = () => {
-    this.setState({
-      visible: true,
-    });
+  const showModal = () => {
+    setVisible(true);
   };
 
-  handleOk = e => {
+  const handleOk = e => {
     console.log(e);
-    this.setState({
-      visible: false,
-    });
+    setVisible(false);
   };
 
-  handleCancel = e => {
+  const handleCancel = e => {
     console.log(e);
-    this.setState({
-      visible: false,
-    });
+    setVisible(false);
   };
 
-  render() {
-    return (
-      <>
-        <Button type="primary" onClick={this.showModal}>
-          Open Modal with customized button props
-        </Button>
-        <Modal
-          title="Basic Modal"
-          visible={this.state.visible}
-          onOk={this.handleOk}
-          onCancel={this.handleCancel}
-          okButtonProps={{ disabled: true }}
-          cancelButtonProps={{ disabled: true }}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Modal>
-      </>
-    );
-  }
-}
-
-export default App;
+  return (
+    <>
+      <Button type="primary" onClick={showModal}>
+        Open Modal with customized button props
+      </Button>
+      <Modal
+        title="Basic Modal"
+        visible={visible}
+        onOk={handleOk}
+        onCancel={handleCancel}
+        okButtonProps={{ disabled: true }}
+        cancelButtonProps={{ disabled: true }}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Modal>
+    </>
+  );
+};
 ```