react 框架(antd)的使用方法

Posted 2022-03-21 kaijiangyugty

脚手架

安装    npm install -g create-react-app

 

引入:

import React,  Component  from "react";
import  Table, Button, Modal, Form, Input  from "antd";//引入antd相应模块
// import  formatDate  from "./utils/index";
import moment from "moment";//moment时间定义插件

import "antd/dist/antd.css";//引入样式

//使用例子:

const columns = [
  
    title: "日期",
    dataIndex: "date",
    // 3.
    render: (text, record, index) => 
      // return formatDate(text);
      return moment(text).format("YYYY-MM-DD HH:mm:ss");
    
  ,
  
    title: "姓名",
    dataIndex: "name"
  ,
  
    title: "住址",
    dataIndex: "address"
  
];

// add form 组件
const AddForm = props => 
  console.log(props);
  let  getFieldDecorator  = props.form;
  return (
    <Form labelCol= xl: 4  wrapperCol= xl: 10 >
      <Form.Item label="姓名">
        getFieldDecorator("name", 
          rules: [ required: true, message: "这个玩意不能为空！" ]
        )(<Input />)
      </Form.Item>
      <Form.Item label="地址">
        getFieldDecorator("address", 
          rules: [ required: true, message: "这个玩意不能为空！" ]
        )(<Input />)
      </Form.Item>
    </Form>
  );
;

// const AddFormWraper = Form.create()(AddForm);

class App extends Component 
  state = 
    dataSource: [],
    addVisible: false
  ;

  /**
   * 打开Modal
   */
  showModal = () => 
    this.setState(
      addVisible: true
    );
  ;

  /**
   * 关闭Modal
   */
  hideModal = () => 
    this.setState(
      addVisible: false
    );
  ;

  /**
   * 获取数据
   */
  getList = () => 
    fetch("http://localhost:9090/user")
      .then(response => response.json())
      .then(res => 
        console.log(res);

        // 1.
        // for (var i = 0; i < res.length; i++) 
        //   var item = res[i];
        //   item.date = formatDate(item.date);
        // 

        // console.log(res);

        // 2.
        // res = res.map(item => 
        //   return  ...item, date: formatDate(item.date) ;
        // );

        // console.log(res);

        this.setState(
          dataSource: res
        );
      );
  ;

  /**
   * 添加确定
   */
  hanldeOk = () => 
    // validateFields()
    // 要获取 孙子的 数据
    // 1. ref 的方式
    // console.log(this.refs.myForm);
    // this.refs.myForm.validateFields((error, values) => 
    //   if (!error) 
    //     console.log(values);
    //   
    // );
    // 2. 你把爷孙的关系，弄成父子的关系
    this.props.form.validateFields((error, values) => 
      if (!error) 
        // console.log(values);

        fetch("http://localhost:9090/user", 
          method: "POST",
          body: JSON.stringify(
            ...values,
            date: new Date().getTime()
          ),
          headers: 
            "content-type": "application/json"
          
        )
          .then(response => response.json())
          .then(res => 
            console.log(res);
            this.hideModal();
           
          );
      
    );
  ;

  componentDidMount() 
    this.getList();
    // formatDate(new Date().getTime());
  

  render() 
    let  dataSource, addVisible  = this.state;
    return (
      <div>
        <Table
          rowKey="id"
          dataSource=dataSource
          columns=columns
          footer=data => 
            return (
              <div
                style=
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "center"
                
              >
                <Button type="primary" onClick=this.showModal>
                  添加记录
                </Button>
              </div>
            );
          
        />

        <Modal
          title="添加记录"
          visible=addVisible
          maskClosable=false
          onCancel=this.hideModal
          onOk=this.hanldeOk
        >
          /* <AddFormWraper ref="myForm" /> */

          <AddForm ...this.props />
        </Modal>
      </div>
    );
  


export default Form.create()(App);