devbox
AllinToyou
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

react+antd的Modal与Form复合使用_react antd 表单复用

作者：AllinToyou | 2024-02-19 16:05:30

赞

踩

react antd 表单复用

效果图

 

点击发放按钮后弹出modal，点击“确认发放”按钮后校验“输入金额”输入框

用 visible控制modal的显示

 

具体实现代码

Modal+Form代码：

  1. <Modal
  2.     destroyOnClose
  3.     title="工资发放"
  4.     visible={this.state.visible}
  5.     footer={null}
  6. >
  7.     <Form >
  8.  
  9.               <FormItem
  10.             {...formItemLayout}
  11.             label="输入金额"
  12.             hasFeedback
  13.         >
  14.             {getFieldDecorator('account', {
  15.                 rules:[{
  16.                     required:true,
  17.                     pattern: new RegExp(  /^[0-9]+([.]\d{0,2})?$/),
  18.                     message: '请输入正确价格'
  19.                 }],
  20.             })(
  21.                 <Input />
  22.             )}
  23.         </FormItem>
  24.         <FormItem
  25.             {...formItemLayout}
  26.             label="教师编号"
  27.             hasFeedback
  28.             hidden={true}
  29.         >
  30.             {getFieldDecorator('teacherId', {
  31.                 rules:[{
  32.                     required:true,
  33.                 }],
  34.             })(
  35.                 <Input  hidden={true}  />
  36.             )}
  37.         </FormItem>
  38.         <FormItem
  39.             {...formItemLayout}
  40.             label="老师姓名"
  41.             hasFeedback
  42.         >
  43.             {getFieldDecorator('nickName', {
  44.  
  45.             })(
  46.                 <Input  disabled ={true}/>
  47.             )}
  48.               
  49.  
  50.         </FormItem>
  51.         <FormItem
  52.             {...formItemLayout}
  53.             label="手机号"
  54.             hasFeedback
  55.         >
  56.             {getFieldDecorator('phone', {
  57.  
  58.             })(
  59.                 <Input disabled ={true} />
  60.             )}
  61.         </FormItem>
  62.         <FormItem
  63.             {...formItemLayout}
  64.             label="所属银行"
  65.             hasFeedback
  66.         >
  67.             {getFieldDecorator('openAccountBank', {
  68.  
  69.             })(
  70.                 <Input disabled ={true} />
  71.             )}
  72.         </FormItem>
  73.         <FormItem
  74.             {...formItemLayout}
  75.             label="卡号"
  76.             hasFeedback
  77.         >
  78.             {getFieldDecorator('accountNumber', {
  79.  
  80.             })(
  81.                 <Input disabled ={true} />
  82.             )}
  83.         </FormItem>
  84.         <FormItem
  85.             {...formItemLayout}
  86.             label="银行卡姓名"
  87.             hasFeedback
  88.         >
  89.             {getFieldDecorator('openAccountName', {
  90.  
  91.             })(
  92.                 <Input disabled ={true} />
  93.             )}
  94.         </FormItem>
  95.         <FormItem
  96.             {...formItemLayout}
  97.             label="银行预留手机号"
  98.             hasFeedback
  99.         >
  100.             {getFieldDecorator('openAccountPhone', {
  101.  
  102.             })(
  103.                 <Input disabled ={true} />
  104.             )}
  105.         </FormItem>
  106.  
  107.         <FormItem
  108.             {...formItemLayout}
  109.             label="身份证号"
  110.             hasFeedback
  111.         >
  112.             {getFieldDecorator('openAccountPaper', {
  113.  
  114.             })(
  115.                 <Input disabled ={true} />
  116.             )}
  117.         </FormItem>
  118.     </Form>
  119.  
  120.     <div style={{ width:'100%', margin: ' 20px  30% ' }}>
  121.         <Button  onClick={this.handleCancelOrder}>取消</Button>
  122.         <Button style={{ margin: ' 0  20px ' }}  onClick={this.saveOderInfo} type="primary">确认发放</Button>
  123.     </div>
  124.  
  125.  
  126. </Modal>

 

事件：

发放按钮触发事件

  1. handleGive = (item) => {
  2.  
  3.     let id = item.id;
  4.  
  5.     this.setState({
  6.  
  7.         visible: true,
  8.  
  9.         id:id,
  10.  
  11.          });
  12.  
  13.     if(id == 'undefined'){
  14.  
  15.         return false
  16.  
  17.     }
  18.  
  19.     detailTeacherAudit({id:id}).then(res=>{
  20.  
  21.         if(res.code == 200) {
  22.  
  23.             console.log(res)
  24.  
  25.             let i = res.result
  26.  
  27.             this.setState({
  28.  
  29.                 id:i.id,
  30.  
  31.             })
  32.  
  33.             this.props.form.setFieldsValue({
  34.  
  35.  
  36.  
  37.                 nickName:i.nickName,//老师姓名
  38.  
  39.                 phone:i.phone, //手机号
  40.  
  41.                 accountNumber:i.accountNumber,//银行账号
  42.  
  43.                 teacherId:i.teacherId,//老师姓名
  44.  
  45.                 openAccountPhone:i.openAccountPhone, //开户手机号
  46.  
  47.                 openAccountName:i.openAccountName,//开户姓名
  48.  
  49.                 openAccountBank:i.openAccountBank, //开户银行
  50.  
  51.                 openAccountPaper:i.openAccountPaper, //开户身份证号
  52.  
  53.                 account:'',//账户金额
  54.  
  55.             });
  56.  
  57.         } else {
  58.  
  59.  
  60.         }
  61.  
  62.     })
  63.  
  64. };
 
确认发放按钮事件

  1. saveOderInfo = (e) => {
  2.  
  3.     e.preventDefault();
  4.  
  5.     this.props.form.validateFields((err, values) => {
  6.  
  7.         if (!err) {
  8.  
  9.             console.log('Received values of form: ', values);
  10.  
  11.             if(values.account == "") {
  12.  
  13.                 message.error('请输入金额！');
  14.  
  15.             }
  16.  
  17.             var param= {}
  18.  
  19.                 param = {
  20.  
  21.                     account:values.account, teacherId:values.teacherId,uid:localStorage.getItem('id'),
  22.  
  23.                 }
  24.  
  25.  
  26.  
  27.             Modal.confirm({
  28.  
  29.                 title: '确认',
  30.  
  31.                 content: '您确认要发放？',
  32.  
  33.                 cancelText:'取消',
  34.  
  35.                 okText:"确定",
  36.  
  37.                 onOk: () => {
  38.  
  39.                                       createOrderByTeacherID(param).then(res=>{
  40.  
  41.                         if(res.code == 200) {
  42.  
  43.                             message.success('申请成功');
  44.  
  45.                             this.setState({
  46.  
  47.                                 visible: false,
  48.  
  49.                             });
  50.  
  51.                             this.props.history.replace('/teacherSalary');
  52.  
  53.                         }else if (res.code == '-1000'){
  54.  
  55.                             message.success(res.message);
  56.  
  57.                             message.success('该用户信息已发起过签约，签约结果：签约中');
  58.  
  59.                             this.props.history.replace('/teacherSalary');
  60.  
  61.                         }
  62.  
  63.                     })
  64.  
  65.  
  66.  
  67.  
  68.  
  69.                 }
  70.  
  71.             })
  72.  
  73.         }
  74.  
  75.     });

 

取消按钮触发事件

  1. handleCancelOrder = e => {
  2.  
  3.     console.log(e);
  4.  
  5.     this.setState({
  6.  
  7.         visible: false,
  8.  
  9.     });
  10.  
  11. };

 

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/AllinToyou/article/detail/115647
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。