day1表格增

import React, { Component } from 'react';
import { Table, Divider, Tag ,Modal, Button,Input} from 'antd';
import styles from './index.scss';//引入css样式


export default class Exercise extends Component {
  constructor(props) {
    super(props);
    this.state= {
      visible: false,
      name: '',
      age:'',
      address:'',
      dataSource: [
        {
          key: '1',
          name: '胡彦',
          age: 32,
          address: '西湖区湖底公园1号',
        },
        {
          key: '2',
          name: '胡彦祖',
          age: 42,
          address: '西湖区湖底公园1号',
        },
      ]
    }

  }
  
    showModal = () => {
      this.setState({
        visible: true,
      });
    };
  
    handleOk = e => {
      console.log(e);
      this.state.dataSource.push({
          key: '3',//这里放个索引，随添加数据而更新
          name: this.state.name,
          age: this.state.age,
          address:this.state.address 
      })
      this.setState({
        visible: false,
      });
    };
  
    handleCancel = e => {
      console.log(e);
      this.setState({
        visible: false,
      });
    };

    addName = e => {
      this.setState({
        name: e.target.value
      });
    }
    addAge = e => {
      this.setState({
        age: e.target.value});
    }
    addAddress = e => {
      this.setState({
        address: e.target.value});
    }
    
  render() {
    const columns = [
      {
        title: '姓名',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '年龄',
        dataIndex: 'age',
        key: 'age',
      },
      {
        title: '住址',
        dataIndex: 'address',
        key: 'address',
      },
    ];
  
    return (
      <div className={styles.container}>
      <Table columns={columns} dataSource={this.state.dataSource}/>
      <Button type="primary" onClick={this.showModal}>
          添加
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}//点确定时执行handleOk方法
          onCancel={this.handleCancel}
        >
          <Input placeholder="姓名" value={this.state.name} onChange={this.addName}/>//用value获取到当前输入值，onChange是输入内容变化时执行后面的方法
          <Input placeholder="年龄" value={this.state.age} onChange={this.addAge}/>
          <Input placeholder="地址" value={this.state.address} onChange={this.addAddress}/>
        </Modal>

      </div>
    );
  }
}