react之antd自定义表单控件(如form + table如何使用)

Form(表单)Funtion组件代码: 

const FormComp = () => {
    //点提交按钮就会触发这个事件并打印Form表单的值
    const onFinish = values => {
        console.log('Received values from form: ', values);
    };

    return (

      <Form 
         initialValues={{
            table:{
               tableValue: [] //初始化Table组件的值
            }
         }}
      >
       <Form.Item
         onFinish={onFinish}
         label="表格"
         name="table"
       >
           <TableComp></TableComp>//这个是Table组件
       </Form.Item>

       <Form.Item>
           <Button htmlType="submit">提交</Button>
       </Form.Item>
    </Form >

    )
}

带有多选框功能的Table的Funtion组件代码:

/**
* @param value形参接受的是Form表单initialValues初始化的值
* @param onChange是函数, 绑定给了Form表单
*/
const TableComp = ({ value, onChange }) => {

  //表格触发change事件, 这时调用Form表单传过来的onChange事件,这样Form表单点提交就拿到了tableValue最新的值了
  tableChange: (e) => {
    onChange({
        tableValue: e 
     })
  },

  return (
    <div>
      <Table
        rowSelection={{
          type: 'checkbox',
          onChange={tableChange}
        }}
        columns={columns}
        dataSource={data}
      />
    </div>
  );
};

以上就完成了Form表单的自定义组件;

如果你用的是class组件,那么调用this.props就能拿到Form表单初始化的value和绑定的onChange事件了,代码如下

class TableComp extends React.Component {

  tableChange= (e) => {
    this.props.onChange({
      tableValue: e
    })
  }

  render() {
    return (
      <Table
        rowSelection={{
          type: 'checkbox',
          onChange={this.tableChange}
        }}
        columns={columns}
        dataSource={data}
      />
    );
  }
}

---

---

文章中多选框表格是这样的: 

 

官方文档地址:

Form表单 

Table表格