Form表单 Form.Item加上传组件，会触发表单提交事件

[jiankian]

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.6.1

平台

h5

重现链接

https://gitee.com/jiankian/AnnTaroNutUI-Test

重现步骤

                <Form
                    form={form}
                    footer={
                        <View
                        >
                            <div
                            >
                                <Button
                                    size='large'
                                    formType='submit'
                                    type='primary'
                                >
                                    提交
                                </Button>
                                <Button
                                    size='large'
                                    formType='reset'
                                >
                                    重置
                                </Button>
                            </div>
                        </View>
                    }

                    onFinish={async (values) => {
                        console.log('Form onFinish values:', values);
                    }}
                    onFinishFailed={(values, errors) => {
                        console.log('Form onFinishFailed values:', values, 'errors:', errors);
                    }}
                >

                    <Form.Item
                        label='图片'
                        name='image'
                    >
                        <Uploader
                            url={'http://127.0.0.1:1333/api/app//user_center/attachment/upload'}
                            headers={
                                {
                                    'Content-Type': 'multipart/form-data',
                                    'Ann-Token': 'eyJhbGciOiJIUzI1NiJ9.eyJ1aWQiOjIsImlwIjoiMTI3LjAuMC4xIiwiZXhwIjoxNzE4ODc0ODIwfQ.3l--LsDxQOMR3MJ6QbHxhMIAz30vWXwvQkKstuhfEKw',
                                }
                            }
                        />
                    </Form.Item>
                </Form>

期望的结果是什么？

表单中加Uploader组件不触发表单的提交事件onFinish事件

实际的结果是什么？

在小程序中是正常的，但是在H5环境中，我只是点击上传组件选择文件，结果表单的onFinish事件就触发了，主要原因是表单上传按钮在H5中渲染成Button按钮，点击就产生表单提交事件。

环境信息

👽 Taro v3.6.27


  Taro CLI 3.6.27 environment info:
    System:
      OS: Windows 11 10.0.22631
    Binaries:
      Node: 16.20.2 - C:\Program Files\nodejs\node.EXE
      Yarn: 1.22.21 - C:\Program Files\nodejs\yarn.CMD
      npm: 8.19.4 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      @tarojs/cli: 3.6.27 => 3.6.27
      @tarojs/components: 3.6.27 => 3.6.27
      @tarojs/helper: 3.6.27 => 3.6.27
      @tarojs/plugin-framework-react: 3.6.27 => 3.6.27
      @tarojs/plugin-html: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-alipay: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-h5: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-jd: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-qq: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-swan: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-tt: 3.6.27 => 3.6.27
      @tarojs/plugin-platform-weapp: 3.6.27 => 3.6.27
      @tarojs/react: 3.6.27 => 3.6.27
      @tarojs/runtime: 3.6.27 => 3.6.27
      @tarojs/shared: 3.6.27 => 3.6.27
      @tarojs/taro: 3.6.27 => 3.6.27
      @tarojs/taro-loader: 3.6.27 => 3.6.27
      @tarojs/webpack5-runner: 3.6.27 => 3.6.27
      babel-preset-taro: 3.6.27 => 3.6.27
      eslint-config-taro: 3.6.27 => 3.6.27
      react: ^18.0.0 => 18.2.0

其他补充信息

No response

[jiankian]

根据调试检查发行上传组件会渲染一个button的HTML标签，但是button按钮上没有加type="button"，加了的话就不会触发表单提交，希望上传组件的button按钮能加上这个type,不然表单中加上传项时候真的难以处理

[Skedush]

+1

[Skedush]

官方的组件演示都是会触发提交事件的。
https://nutui.jd.com/taro/react/2x/#/zh-CN/component/form

46_1716342697.mp4

点击form控件中的uploader就会触发表单提交事件中的toast

[oasis-cloud]

2.6.8 版本已经修复了