Antd如何接收Form组件的函数<此功能仅限Antd v3版本以下>

1. 在React项目中,我们需要在Modal对话框中展示一个form表单的功能,此时我们要拿到封装的form函数和输入的value值?那么我们要分为几步做!

1.1 假设我们封装了from表单<暂时命名为:AddUpdateForm>

   注:传递form函数时必须在子组件中声明类型,PropTypes 提供一系列验证器,可用于确保组件接收到的数据类型是有效的。当传入的 prop 值类型不正确时,JavaScript 控制台将会显示警告。出于性能方面的考虑
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  Form,
  Input
} from 'antd'
const Item = Form.Item
class AddUpdateForm extends Component {
*注:传递form函数时必须在子组件中声明类型
static propTypes = {
    setForm: PropTypes.func.isRequired,
    categoryName: PropTypes.string,
  }
/* 
添加/修改分类的Form组件
*/
  render() {
    const { getFieldDecorator } = this.props.form
    const { categoryName } = this.props
    return (
      
{ getFieldDecorator('categoryName', { initialValue: categoryName || '', rules: [ {required: true, message: '分类名称必须输入'} ] })( ) }
) } } export default Form.create()(AddUpdateForm)

*1.2:在父组件页面中引入form子组件后需要设置一个函数名来接收函数<函数名: setForm={form=>this.form=form}>

*1.2.1:注 > 对象体中是将获取的子组件中的form对象赋值传给父组件的form中
import React, { Component } from 'react'
import {
  Card, 
  Table,
  Modal
} from 'antd'
import AddUpdateForm from './add-update-form'
export default class Category extends Component {
  /* 
    点击确定的回调: 去添加/修改分类
  */
  handleOk = () => {
    // 进行表单验证
    this.form.validateFields(async (err, values) => {
      if (!err) {
        // 验证通过后, 得到输入数据
        const { categoryName } = values
        const {showStatus} = this.state
        this.form.resetFields() // 重置输入数据(变成了初始值)
        // 根据响应结果, 做不同处理
      }
    })
  }
  render() {
    return (
      
        
           this.form = form} categoryName={category.name}/>
        
    )
  }
}

此时就可以直接调用this.form获取子组件中的输入值函数方法

你可能感兴趣的:(Antd如何接收Form组件的函数<此功能仅限Antd v3版本以下>)