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时间定义插件

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

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

//使用例子: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);