【React】利用antd的form自定义表单控件

由于业务的需求，需要对Form表单进行自定义控件操作
业务需求如下：

屏幕快照 2019-06-03 下午5.10.58.png

首先点击选择按钮---在弹窗中选择产品--将选择好的产品展示在页面上，关于自定义组件的封装网上大牛的方法大多是封装好新的组件，从而能够在点击保存的时候获取到自定义的value，

但是今天给大家提供另一种思路：只是将组件放在getFieldDecorator中，点击保存的时候通过this.props.form.validateFields方法中的values加入要传给后台的新的参数

具体实现代码如下：

//展示产品的list放在选择产品下面
    showProductList =()=> {
        let ProductList = this.state.ProductList
        return ProductList && ProductList.map((item,index) => {
            return <div key={index}>{item.name}</div>
        })
    }
  const SELECTBTN = <FormItem label={label} {...formItemLayout} key={field}>
                    {
                       getFieldDecorator(field, {
                           rules:[{
                               initialValue: initialValue,
                               required:required,
                               message: requiredMsg,
                           }]
                       })(
                        <div>
                            <Button type="primary" onClick = {this.chooseProduct}>选择</Button>
                            {this.showProductList()}  
                            {/* 展示产品list */}
                        </div>
                           )
                   }
                    </FormItem>

点击保存得时候,在values中定义好要传给后台的参数,如：我需要传给后台需要的ids

 handleFormSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFields((err, values) => {
            values.ids = [1,2,3] //这步骤是定义的，根据你的需求来修改参数值
            console.log('Received values of form: ', values); //这样打印出来的value中就有ids了
        });
       //this.requestLIst()然后这块可以请求接口把参数传过去了
    }

这样就能实现了哇～