Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

表单提交,两个submit,如何区分,data-* 获取不到 #268

Closed
hanf1990 opened this issue Sep 15, 2022 · 8 comments
Closed

表单提交,两个submit,如何区分,data-* 获取不到 #268

hanf1990 opened this issue Sep 15, 2022 · 8 comments
Labels
enhancement New feature or request

Comments

@hanf1990
Copy link

表单提交,两个submit,如何区分,data-* 获取不到
原生可以

@hanf1990 hanf1990 added the enhancement New feature or request label Sep 15, 2022
@56600535
Copy link

我也有相同的问题,我有两个提交,一个是预览订单,一个是提交订单,需求没法做。

@Alpsli
Copy link
Member

Alpsli commented Oct 17, 2022

我们正在重构当前的表单,这个问题我这边临时解决下

@56600535
Copy link

我们正在重构当前的表单,这个问题我这边临时解决下

我尝试了一下 onTap会在 htmlType="submit"之前执行,所以我给绑定了一个点击事件设置一个标记,并在submit事件中进行判断,然后执行不同的逻辑,我不确定onTap事件是否总是可以在submit之前执行,但这临时的解决了我的问题。

// buy.js
Page({
  data: {
    // 提交是否是预览订单
    previewOrderFlag: false
  },
  // 表单提交事件
  orderSubmit(e) {
    if(this.data.previewOrderFlag){
      this.previewOrder();
      return;
    }
   // 这里是提交的逻辑
  },
  previewOrder(){
    if(this.data.previewOrderFlag){
      // 预览订单逻辑
      this.setData({
        previewOrderFlag: false
      })
    }else {
      this.setData({
        previewOrderFlag: true
      })
    }
  }
}

@56600535
Copy link

我们正在重构当前的表单,这个问题我这边临时解决下

我不是一个专业的前端工程师,您知道onTap和 submit是同步还是异步执行吗?我想知道这样做是否会有问题。

@Alpsli
Copy link
Member

Alpsli commented Oct 17, 2022

onTap 是会立刻执行,submit 会触发form的validate校验等,你这样写是ok的,如果你还担心时序问题,你可以给handlesubmit 采用 setTimeout 异步执行

@jc9702507
Copy link
Collaborator

#305

@jc9702507
Copy link
Collaborator

1.0 使用方式:

<form-input
  label="用户名"
  name="account"
  ref="handleForm1"
/>

<form-input
  label="密码"
  name="password"
  password
  ref="handleForm1"
/>

<button onTap="submitForm1">提交表单1</button>

<form-input
  label="用户名"
  name="account"
  ref="handleForm2"
/>

<form-input
  label="密码"
  name="password"
  ref="handleForm1"
/>

<button onTap="submitForm1">提交表单2</button>
import Form from 'antd-mini/es/Form/form';

Page({
  form1: new Form(), // 表单1 
  form2: new Form(), // 表单2
  handleForm1(ref) {
    this.form1.addItem(ref);
  },
  handleForm2(ref) {
    this.form2.addItem(ref);
  },
  async submitForm1() {
    const values = await this.form1.submit();
    console.log(values);
  },
  async submitForm2() {
    const values = await this.form2.submit();
    console.log(values);
  },
});

@jc9702507
Copy link
Collaborator

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

4 participants