react 我想把子组件的表单提交给父组件 但是一直获取不到

Question

这是我父组件里调用的子组件

 modalCancel = () => {
    this.setState({
      modalVisible: false,
    })
  }
  modalHandleOk = () => {
    this.setState({
      modalVisible: false,
    })
  }
  saveFormRef=(form)=>{
    console.log(form)
  }


            <LeisurePriceStockAddModal
              ref={this.saveFormRef}
              modalVisible={this.state.modalVisible}
              modalCancel={this.modalCancel}
              modalHandleOk={this.modalHandleOk}
            />

这是子组件

import React from 'react'
import {Form ,Modal,Input,Button} from 'antd'
// import InputCom from '../../../../../../../components/tableCom/InputCom'
const FormItem = Form.Item
class LeisurePriceStockAddModal extends React.Component {
  render (){
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 20 },
    };
    const {modalVisible,modalCancel,modalHandleOk,form} = this.props
    const {getFieldDecorator} = form
    return (
      <Modal
        visible={modalVisible}
        title={"添加套餐"}
        onCancel={modalCancel}
        onOk={modalHandleOk}
      >
        <Form layout='horizontal'>
          <FormItem {...formItemLayout} label={'套餐名称'}>
            {getFieldDecorator('套餐',{
              rules: [{required: true, message: '套餐名称不能为空'}],
              initialValue: '',
            })(
              <Input/>
            )}
          </FormItem>
        </Form>
      </Modal>
    )
  }
}
export default Form.create()(LeisurePriceStockAddModal)

form一直获取不到是什么情况 请大佬帮我看看

Answer 1

谢邀！
父组件获取子组件的数据呢，一般有两种方法。

• refs

子函数定义一个方法 getValues = () => {return value}，然后父组件通过refs获取：

<SubComponent ref={ref => this.subComponent = ref}/>
// other code

() => {
    const value = this.subComponent.getValues();
    // value 就是子组件返回的数据
}

• 回调函数

父组件：

const setValues = (value) => {
    //value 就是子组件传回的数据
}

<SubComponent setValues={setValues}/>

子组件

const {setValues} = this.props
<button onClick={() => {
    setValues(value); //value 就是子组件需要传到父组件的数据
}}>Submit</button>

一般建议使用第二种，因为我们再更多的使用是stateless的方式，而stateless不支持refs。

Answer 2

constructor(props) {
    super(props);
    props.ref(props.form);
}

在子组件加这个