react 入坑学习（三）ANTD Form 读取其中Table数据

ANTD Form 读取其中Table数据

首先将table中的数据保存起来，我这里使用了selectRoleRow来保存。
form.item 里的name 可以先不定义

let selectRoleRow=[];
rowSelection={{
          onChange: (selectedRowKeys, selectedRows) => {
            selectRoleRow=selectedRows;
          },
        }}

然后是我们的Form

<Form
      name="register"
      layout="horizontal"
      scrollToFirstError
      onFinish={onFinish}
    >
      <Form.Item
        name="userId"
        label="员工号"
        rules={[
          {required: true,
            message: 'Please input your id!',},
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="userName"
        label="姓名"
        rules={[
          {required: true,
            message: 'Please input your name!', },
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item label="用户角色" values={selectRoleRow}>
        <Table 
        Checkbox 
        rowSelection={{
          onChange: (selectedRowKeys, selectedRows) => {
            selectRoleRow=selectedRows;},}}
        columns={rolecolumns} 
        dataSource={roletabledata} 
        />
      </Form.Item>

      <Form.Item {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">
            新增
          </Button>
          <Button type="primary">
            取消
          </Button>
      </Form.Item>
    </Form>

接着在Form的onFinish方法中，加入我们的table数据

const onFinish = values => {
    let formvalue=new Object();
    formvalue.roles=selectRoleRow;
    formvalue.userId=values.userId;
    formvalue.userName=values.userName;
    console.log('Received values of form: ', formvalue);
  };

这样就可以将Form 中Table里的数据读出来了，如果有个更好的方法，欢迎讨论。