react关于弹层的组件

react关于组件搜索一堆，对于小白来说看不懂。写个晓得例子供大家参考：

第一步：

import React,{Component,useState} from 'react'; //引入react关键
 
import { Button, Modal, Form, Input, Table } from 'antd';//antd 组件使用

import {get,del,post} from '../../utils/request' //请求方法封装

第二步：搭建组件主体

class Lists extends Component {

    constructor(){
       super();
        this.state={
          
        }
    }
    return (
        <div></div>
    )
}
export default Lists;

第三步：主体内容 弹层

<Modal
    title="创建登录者"
    visible={this.state.visible}
    onOk={this.handleOk}
    onCancel={this.handleCancel}
    okText='创建'
    cancelText = '取消'
 >
  <div>
    <label>用户名：</label>
    <input className="ant-input" type="text" 
           value={this.state.username} 
           name="username"
           onChange={(event)=>this.handleChange(event)}/>
  </div>
  <div>
    <label>密码：</label>
    <input className="ant-input" type="password" 
           value={this.state.password} 
           name="password"
           onChange={(event)=>this.handleChange(event)}/>
  </div>
</Modal>

第四步：方法

constructor(){
    super();
    this.state={
      visible:false,
      password:'',
      username:'',
    }
}
showModal = () => {  //弹层显示
    this.setState({
      visible: true,
    });
  };
  handleOk = () => {
    console.log(this.state.username)
    const {username,password} = this.state;
    post('请求方法名',
        {
            account:username,
            password:password
    }).then(res=>{
      console.log(res);
      if(res.data.code=='20000'){
        this.getData(); //调用查询数据接口
        this.setState({
          visible: false  //弹层隐藏
        });
      }else {}
    })
    .catch(error=>{
      console.log(error)
    })
  }
  handleCancel = e => {  //点击取消
    console.log(e);
    this.setState({
      visible: false,
    });
  };
  handleChange(e){
    var name=e.target.name;   //name  password  phone
    this.setState({
      [name]:e.target.value
    })
  }

第五步：效果图

这就是弹层的全部代码 。

如果需要可以封装成单独的组件使用。