1. 在React項(xiàng)目中鞭达，我們需要在Modal對(duì)話框中展示一個(gè)form表單的功能司忱，此時(shí)我們要拿到封裝的form函數(shù)和輸入的value值？那么我們要分為幾步做畴蹭！

1.1 假設(shè)我們封裝了from表單<暫時(shí)命名為：AddUpdateForm>

   注：傳遞form函數(shù)時(shí)必須在子組件中聲明類型坦仍，PropTypes 提供一系列驗(yàn)證器，可用于確保組件接收到的數(shù)據(jù)類型是有效的叨襟。當(dāng)傳入的 prop 值類型不正確時(shí)繁扎，JavaScript 控制臺(tái)將會(huì)顯示警告。出于性能方面的考慮

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  Form,
  Input
} from 'antd'
const Item = Form.Item
class AddUpdateForm extends Component {
*注：傳遞form函數(shù)時(shí)必須在子組件中聲明類型
static propTypes = {
    setForm: PropTypes.func.isRequired,
    categoryName: PropTypes.string,
  }
/* 
添加/修改分類的Form組件
*/
  render() {
    const { getFieldDecorator } = this.props.form
    const { categoryName } = this.props
    return (
      <Form>
        <Item>
          {
            getFieldDecorator('categoryName', {
              initialValue: categoryName || '',
              rules: [
                {required: true, message: '分類名稱必須輸入'}
              ]
            })(
              <Input type="text" placeholder="請(qǐng)輸入分類名稱"></Input>
            )
          }
        </Item>
      </Form>
    )
  }
}

export default Form.create()(AddUpdateForm)

*1.2:在父組件頁(yè)面中引入form子組件后需要設(shè)置一個(gè)函數(shù)名來(lái)接收函數(shù)<函數(shù)名: setForm={form=>this.form=form}>

*1.2.1:注 > 對(duì)象體中是將獲取的子組件中的form對(duì)象賦值傳給父組件的form中

import React, { Component } from 'react'
import {
  Card, 
  Table,
  Modal
} from 'antd'
import AddUpdateForm from './add-update-form'
export default class Category extends Component {
  /* 
    點(diǎn)擊確定的回調(diào): 去添加/修改分類
  */
  handleOk = () => {
    // 進(jìn)行表單驗(yàn)證
    this.form.validateFields(async (err, values) => {
      if (!err) {
        // 驗(yàn)證通過(guò)后, 得到輸入數(shù)據(jù)
        const { categoryName } = values
        const {showStatus} = this.state
        this.form.resetFields() // 重置輸入數(shù)據(jù)(變成了初始值)
        // 根據(jù)響應(yīng)結(jié)果, 做不同處理
      }
    })
  }
  render() {
    return (
      <Card extra={extra}>
        <Table />
        <Modal>
          <AddUpdateForm setForm={form => this.form = form} categoryName={category.name}/>
        </Modal>
      </Card>
    )
  }
}

此時(shí)就可以直接調(diào)用this.form獲取子組件中的輸入值函數(shù)方法