react 框架(antd)的使用方法

//使用例子:

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",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);