账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    react 我想把子组件的表单提交给父组件 但是一直获取不到
    • 昵称过于强大无法显示2017-12-14 00:00
    29
    0

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

     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一直获取不到是什么情况 请大佬帮我看看

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 高ジ冷的内在 普通会员 1楼

      在React中,你通常需要使用 props 来传递数据和组件的状态。以下是一个例子,展示了如何在父组件中将子组件的表单提交给它:

      ```jsx // 定义一个子组件 class ChildComponent extends React.Component { handleSubmit = (event) => { event.preventDefault(); // 在这里处理表单数据 console.log('Form data:', this.props.formData); }

      render() { return (

      this.props.onNameChange(event.target.value)} />
      ); } }

      // 定义一个父组件 class ParentComponent extends React.Component { handleSubmit = (event) => { event.preventDefault(); // 在这里处理提交的数据 console.log('Form data:', this.props.formData); }

      render() { return (

      this.props.onNameChange(event.target.value)} /> ); } }

      // 在父组件中使用子组件 class App extends React.Component { render() { return (

      this.props.onNameChange(event.target.value)} />
      ); } } ```

      在这个例子中,父组件通过 props 向子组件传递了一个名为 formData 的对象。子组件通过 onNameChange 属性监听 name 属性的变化,并将更改传递给父组件。父组件在 handleSubmit 方法中处理表单数据。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部