码迷,mamicode.com
首页 > 其他好文 > 详细

react 框架(antd)的使用方法

时间:2019-07-06 19:28:01      阅读:272      评论:0      收藏:0      [点我收藏+]

标签:添加   ESS   time()   http   map   export   例子   sage   数据   

脚手架

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

 


 

react 框架(antd)的使用方法

标签:添加   ESS   time()   http   map   export   例子   sage   数据   

原文地址:https://www.cnblogs.com/kaijiangyugty/p/11143532.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!