如何在react-antd中弹出层form内容传递给父组件

发布时间:2020-10-26 14:28:36 作者:Leah
来源:亿速云 阅读:621

如何在react-antd中弹出层form内容传递给父组件?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

子组件:

// jshint esversion:6
import React, { Component } from 'react';
import { Form, Input} from 'antd';

const FormItem = Form.Item;

class Forms extends Component{
  getItemsValue = ()=>{  //3、自定义方法,用来传递数据(需要在父组件中调用获取数据)
    const values= this.props.form.getFieldsValue();    //4、getFieldsValue:获取一组输入控件的值,如不传入参数,则获取全部组件的值
    return values;
  }
  render(){
    const { form } = this.props;
    const { getFieldDecorator } = form;  //1、将getFieldDecorator 解构出来,用于和表单进行双向绑定
    return(
      <Form layout="vertical">
        <FormItem label="姓名">
          {getFieldDecorator('name')(  //2、getFieldDecorator 的使用方法,这种写法真的很蛋疼
            <Input />
          )}
        </FormItem>
        <FormItem label="年龄">
          {getFieldDecorator('age')(
            <Input />
          )}
        </FormItem>
        <FormItem label="城市">
          {getFieldDecorator('address')(
            <Input />
          )}
        </FormItem>
      </Form>
    )
  }
}

export default Form.create()(Forms); //创建form实例

父组件:

import React, { Component } from 'react';
import { Modal } from 'antd';
import Forms from './Forms'

export default class Modals extends Component {
  handleCancel = () => {
    this.props.closeModal(false);
  }
  handleCreate = () => {
    console.log(this.formRef.getItemsValue());   //6、调用子组件的自定义方法getItemsValue。注意:通过 this.formRef 才能拿到数据
    this.props.getFormRef(this.formRef.getItemsValue());
    this.props.closeModal(false);
  }
  render() {
    const { visible } = this.props;
    return (
      <Modal
        visible={visible}
        title="新增"
        okText="保存"
        onCancel={this.handleCancel}
        onOk={this.handleCreate}
      >
        <Forms
          wrappedComponentRef={(form) => this.formRef = form}    //5、使用wrappedComponentRef 拿到子组件传递过来的ref(官方写法)
        />
      </Modal>
    );
  }
}

补充知识:react+antd组件 modal里面包裹使用form表单并获取提交事件

1 先上图

如何在react-antd中弹出层form内容传递给父组件

如何在react-antd中弹出层form内容传递给父组件

我这里是点击“修改密码”那个按钮,然后跳到了modal框。(大家这里可以随便写一个按钮,然后给他一个点击事件让他可以显示modal框就好了,我这里着重讲解标题的内容)

2 贴代码

const [visible, setVisible] = useState(false);//antd 控制modal是否显示
const showMoal=()=>{
  // console.log("showMoal")
  setVisible(true);
}
const handleCancel = e => {
// console.log("cancel:",e);
setVisible(false);
};

function updatePasswordChange(){
  // console.log("0000");
  setVisible(false);
}

//Modal框
 <Modal
   title="密码修改"
   visible={visible}
   onCancel={handleCancel}
   footer={null}
 >
   
   <UpdatePassword updatePasswordChange={updatePasswordChange}></UpdatePassword>
</Modal>


//Form表单的提交事件
const onFinish = values => {
    // console.log('Success:', values); 
    IsUpdatePassword.commit(session.environment,values.newpassword,values.oldpassword,(response, errors) => {
        if (errors) {
          message.error(errors[0].message);
        } else {
          //修改密码成功
          message.success('修改密码成功!');
          props.updatePasswordChange();
        }
      },
      (errors) => {
        message.error(errors.source.errors[0].message);
      })
    
};

//Form表单部分
return(
    <>
      <Form
        {...layout}
        name="密码修改"
        initialValues={{
          remember: true,
        }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="旧密码"
          name="oldpassword"
          rules={[
          {
            required: true,
            message: '请输入旧密码!',
          },
          ]}
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          label="新密码"
          name="newpassword"
          rules={[
          {
            required: true,
            message: '请输入新密码!',
          },
          ]}
          hasFeedback
        >
          <Input.Password />
        </Form.Item>

        <Form.Item
          name="confirm"
          label="确认新密码"
          dependencies={['newpassword']}
          hasFeedback
          rules={[
          {
            required: true,
            message: '请确认新密码!',
          },
          ({ getFieldValue }) => ({
            validator(rule, value) {
            if (!value || getFieldValue('newpassword') === value) {
              return Promise.resolve();
            }
            return Promise.reject('两次新密码不一致!');
            },
          }),
          ]}
        >
          <Input.Password />
        </Form.Item>


        {/* <Form.Item {...tailLayout} name="remember" valuePropName="checked">
          <Checkbox>Remember me</Checkbox>
        </Form.Item> */}

        <Form.Item {...tailLayout}>
          <Row>
            <Col span={12}>
              <Button type="primary" htmlType="submit">
              确认
              </Button>
            </Col>
            <Col span={12}>
              <Button onClick={props.updatePasswordChange}>
              取消
              </Button>
            </Col>
          </Row>
        </Form.Item>
      </Form>
    </>
  );
}

小结:

上面的代码你看起来可能有点乱,而且也运行不起来,那是肯定的!因为我只粘贴了整个项目的一部分。

下面我来点睛:modal里面使用form表单并获取提交事件主要是使用了modal的**footer={null}**这个特性把外面的“确认取消按键隐藏”,然后使用我们自己的Form的“确定取消”按键,然后再通过Form的onFinish 事件来提交值和控制modal框的显示与消失。

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

推荐阅读:
  1. react通过父组件渲染子组件中的内容
  2. vue中父组件如何给子组件传值

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

react antd 弹出层

上一篇:c# SpinWait如何使用

下一篇:如何使用Django admin组件

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》