react 框架(antd)的使用方法

脚手架

安装    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);

 

 

转载于:https://www.cnblogs.com/kaijiangyugty/p/11143532.html