为了账号安全,请及时绑定邮箱和手机立即绑定

vue jsx antd form 表单控件显示隐藏造成数据丢失

vue jsx antd form 表单控件显示隐藏造成数据丢失

weixin_慕尼黑3383603 2020-04-05 20:52:48
我在vue里面用jsx的形式写antd的表单绑定,但是点击按钮显示或隐藏一个formitem后,来回切换,造成下面的数据全部都没有,不知道怎么办,是我写的有问题么。。。请教~export default {     data () {         return {             isShow: false,             form: this.$form.createForm(this)         };     },     methods: {         submit () {             this.form.validateFieldsAndScroll((err, values) => {                 if (err) {                     return;                 }                 console.log(values, 'formData');             });         },         show () {             this.isShow = !this.isShow;         }     },     render () {         let {getFieldDecorator} = this.form;                  return (             <div>                 <hm-button onClick={this.show}>显示隐藏</hm-button>                 <a-form form={this.form}>                     <a-form-item label='备注'>                         {                             getFieldDecorator('remark',                                 {                                     rules: [                                         {                                             required: true,                                             message: '请填备注'                                         }                                     ]                                 })(<a-textarea placeholder='备注' {...{                                 props: {                                     placeholder: '备注'                                 }                             }}/>)                         }                     </a-form-item>                     {                         this.isShow &&                             <a-form-item label='订单号'>                                 {                                     getFieldDecorator('seq',                                         {                                             rules: [                                                 {                                                     required: true,                                                     message: '请填写订单号'                                                 }                                             ]                                         }                                     )(<a-input {...{                                         props: {                                             placeholder: '订单号'                                         }                                     }}/>)                                 }                             </a-form-item>                     }                     <a-form-item label='售后原因'>                         {                             getFieldDecorator('verify_return_reason',                                 {                                     rules: [                                         {                                             required: true,                                             message: '请填写实际售后原因'                                         }                                     ]                                 })(<a-select {...{                                 props: {                                     placeholder: '售后原因',                                     options: [                                         {                                             label: '产品有问题',                                             value: 1                                         },                                         {                                             label: '物流有问题',                                             value: 2                                         }                                     ]                                 }                             }}/>)                         }                                              </a-form-item>                     <a-form-item label='德分'>                         {                             getFieldDecorator('paypoints_number',                                 {                                     rules: [                                         {                                             required: true,                                             message: '请填写德分'                                         }                                     ]                                 })(<a-input {...{                                 props: {                                     placeholder: '德分'                                 }                             }}/>)                         }                     </a-form-item>                     <a-form-item label='是否赔付'>                         {                             getFieldDecorator('is_compensate',                                 {                                     rules: [                                         {                                             required: true,                                             message: '请填写是否赔付'                                         }                                     ]                                 })(<a-radio-group {...{                                 props: {                                     placeholder: '是否赔付',                                     options: [                                         {                                             label: '否',                                             value: 0                                         },                                         {                                             label: '是',                                             value: 1                                         }                                     ]                                 }                             }}/>)                         }                     </a-form-item>                 </a-form>                 <hm-button onClick={this.submit}>提交</hm-button>             </div>         );     } };
查看完整描述

目前暂无任何回答

  • 0 回答
  • 0 关注
  • 3107 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
微信客服

购课补贴
联系客服咨询优惠详情

帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

公众号

扫描二维码
关注慕课网微信公众号