react 无状态函数式组件写法

 

目录

 

react  无状态函数式组件写法（变量重新赋值、表单创建）

1.引入库

2.读入数据

---

react  无状态函数式组件写法

1.引入库

 

import React, { useRef, forwardRef, useState } from 'react';
import styled from 'styled-components';
import { Button, Modal } from 'antd';

2.读入数据

 

import React, { useRef, forwardRef, useState } from 'react';
import styled from 'styled-components';
import { Button, Modal } from 'antd';

const Button = styled.div`
  height: 28px;
  line-height: 28px;
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
`;
  const [visible, setVisible] = useState(false);

  const showModal = () => {
    setVisible(true);
  };
  const hideModal = () => {
    setVisible(false);
  };

  return (
    <React.Fragment>
      <Button icon="printer" type="danger" onClick={showModal}></Button>
      <Modal
        title="Modal"
        visible={visible}
        onOk={handleClickDownloadButton}
        onCancel={hideModal}
        okText="确认"
        cancelText="取消"
      >
        <p>Bla bla ...</p>
        <p>Bla bla ...</p>
        <p>Bla bla ...</p>
      </Modal>
    </React.Fragment>
  );
});