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表格