antd中Modal包裹Form组件用this.props.fo

项目的需求中需要antd的Modal组件包裹Form组件，如下图

modal包裹form.png

Modal组件中嵌套Form组件，点击确定的时候选中获取Form选中组件的value,在点击ok的时候回报错说不能读取到getFieldsValue属性其中错误的Modal代码如下

  //有问题的modal
<Modal
    title="开通城市"
    visible={this.state.isShowOpenCity}
    onCancel={()=>{
        this.setState({
            isShowOpenCity:false
          })
      }}
   onOk={()=>{console.log(this.props.form.getFieldsValue())}}  
//不能直接用this.props.form.getFieldsValue()这个方法，因为不是在form中，在modal中的this上没有这个方法，所以对于包裹组件需要table中带的包裹组件ref方法
>
    <OpenCityForm />  //嵌套的Form组件
 </Modal>

下面是嵌套的Form组件OpenCityForm

class OpenCityForm extends React.Component{
   render(){
     const formItemLayout = {
       labelCol:{
         span:5
       },
       wrapperCol:{
        span:19
       }
     }
     const { getFieldDecorator } =this.props.form
     return(
      <Form layout="horizontal">
        <FormItem label="选择城市" {...formItemLayout}>
          {
            getFieldDecorator('city_id',{
              initialValue:"1"
            })(
            <Select style={{width:'100px'}}>
              <Option value="">全部</Option>
              <Option value="1">北京市</Option>
              <Option value="2">天津市</Option>
            </Select>
            )
          }
        </FormItem>
        <FormItem label="营运模式" {...formItemLayout}>
          {
            getFieldDecorator('mode',{
              initialValue:"1"
            })(
              <Select style={{width:'100px'}}>
                <Option value="1">自营</Option>
                <Option value="2">加盟</Option>
              </Select>
            )
          }   
        </FormItem>
        <FormItem label="用车模式" {...formItemLayout}>
          {
            getFieldDecorator('op_mode',{
              initialValue:"1"
            })(
              <Select style={{width:'100px'}}>
              <Option value="1">制定停车点</Option>
              <Option value="2">禁停区模式</Option>
            </Select>
            )
          }  
        </FormItem>
    </Form>
     )
   }
}
OpenCityForm = Form.create({})(OpenCityForm);

不能直接用this.props.form.getFieldsValue()这个方法，因为不是在form中，在modal中的this上没有这个方法，所以对于包裹组件需要Table中带的包裹组件ref方法

其中Table组件自带ref的方法，上下两种，建议选第二种，这样this上就会有formRef这个方法，就能在Modal中获取到Form中的数据

ref2.png

在Form组件上加上wrappedComponentRef属性，将参数赋值给this上的cithForm上，修改后的Modal代码如下：

//修改后的modal
      <Modal
          title="开通城市"
            visible={this.state.isShowOpenCity}
            onCancel={()=>{
               this.setState({
                 isShowOpenCity:false
               })
            }}
             onOk={()=>{console.log(this.cityForm.props.form.getFieldsValue())}
         >
         <OpenCityForm wrappedComponentRef={(inst)=>{this.cityForm = inst}}/>
     </Modal>