taro-ui taro-ui 3.0.0-alpha.3 表单组件 AtForm 提交按钮点击后报错

Taro UI 版本信息

v2.3.4

问题描述

表单组件 AtForm 提交按钮点击后报错。使用 taro inti 命令安装时，选择 taro-ui，默认安装的 taro-ui 版本（3.0.0-alpha.3）

复现步骤

taro create --name test
根据官网示例，完成代码文件 test.tsx，具体代码见下方
yarn dev:weapp
微信开发者工具打开，点击表单提交按钮

复现代码

// test.tsx
import React, { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { AtForm, AtInput, AtButton } from 'taro-ui'
import "taro-ui/dist/style/components/button.scss" // 按需引入
import './test.scss'

export default class Test extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      value: ''
    }
  }
  handleChange (value) {
    this.setState({
      value
    })
  }
  onSubmit (event) {
    console.log(this.state.value)
  }
  onReset (event) {
    this.setState({
      value: '',
    })
  }
  render () {
    return (
      <View className='test'>
        <AtForm
          onSubmit={this.onSubmit.bind(this)}
          onReset={this.onReset.bind(this)}
        >
          <AtInput
            name='value'
            title='文本'
            type='text'
            placeholder='单行文本'
            value={this.state.value}
            onChange={this.handleChange.bind(this, 'value')}
          />
          <AtButton formType='submit'>提交</AtButton>
          <AtButton formType='reset'>重置</AtButton>
        </AtForm>

      </View>
    )
  }
}

报错信息

MiniProgramError
Cannot read property 'triggerEvent' of undefined
TypeError: Cannot read property 'triggerEvent' of undefined
    at AtButton.onSumit (http://127.0.0.1:26619/appservice/vendors.js:3051:21)
    at TaroElement.dispatchEvent (http://127.0.0.1:26619/appservice/taro.js:4542:29)
    at Ze.eventHandler [as eh] (http://127.0.0.1:26619/appservice/taro.js:2917:10)
    at Object.r.safeCallback (http://127.0.0.1:26619/appservice/__dev__/WAService.js?t=wechat&v=2.12.2&s=1599558505684:2:1954289)
    at http://127.0.0.1:26619/appservice/__dev__/WAService.js?t=wechat&v=2.12.2&s=1599558505684:2:2123485
    at s (http://127.0.0.1:26619/appservice/__dev__/WAService.js?t=wechat&v=2.12.2&s=1599558505684:2:2050351)
    at http://127.0.0.1:26619/appservice/__dev__/WAService.js?t=wechat&v=2.12.2&s=1599558505684:2:2123410
    at r (http://127.0.0.1:26619/appservice/__dev__/WAService.js?t=wechat&v=2.12.2&s=1599558505684:2:2031780)
    at http://127.0.0.1:26619/appservice/__dev__/WAService.js?t=wechat&v=2.12.2&s=1599558505684:2:2031902
    at http://127.0.0.1:26619/appservice/__dev__/WAService.js?t=wechat&v=2.12.2&s=1599558505684:2:959048
console.error @ VM193:1
errorReport @ VM197 WAService.js:2
thirdErrorReport @ VM197 WAService.js:2
(anonymous) @ VM197 WAService.js:2
(anonymous) @ VM197 WAService.js:2
r.safeCallback @ VM197 WAService.js:2
r.call @ VM197 WAService.js:2
message @ VM197 WAService.js:2
r.safeCallback @ VM197 WAService.js:2
(anonymous) @ VM197 WAService.js:2
s @ VM197 WAService.js:2
(anonymous) @ VM197 WAService.js:2
r @ VM197 WAService.js:2
(anonymous) @ VM197 WAService.js:2
(anonymous) @ VM197 WAService.js:2
i @ VM16 asdebug.js:1
c @ VM16 asdebug.js:1
(anonymous) @ VM16 asdebug.js:1
p @ VM16 asdebug.js:1
g @ VM16 asdebug.js:1
(anonymous) @ VM16 asdebug.js:1
_ws.onmessage @ VM16 asdebug.js:1

系统信息

👽 Taro v3.0.9


  Taro CLI 3.0.9 environment info:
    System:
      OS: macOS 10.15.5
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 12.13.1 - /usr/local/bin/node
      Yarn: 1.15.2 - /usr/local/bin/yarn
      npm: 6.9.0 - /usr/local/bin/npm
    npmPackages:
      @tarojs/cli: 3.0.9 => 3.0.9 
      @tarojs/components: 3.0.9 => 3.0.9 
      @tarojs/mini-runner: 3.0.9 => 3.0.9 
      @tarojs/react: 3.0.9 => 3.0.9 
      @tarojs/runtime: 3.0.9 => 3.0.9 
      @tarojs/taro: 3.0.9 => 3.0.9 
      @tarojs/webpack-runner: 3.0.9 => 3.0.9 
      babel-preset-taro: 3.0.9 => 3.0.9 
      eslint-config-taro: 3.0.9 => 3.0.9 
      react: ^16.10.0 => 16.13.1 
      taro-ui: ^3.0.0-alpha.3 => 3.0.0-alpha.3

补充信息

Sep 08 '20 10:09 liutao-me

欢迎提交 Issue~

如果你提交的是 bug 报告，请务必遵循 Issue 模板的规范，尽量用简洁的语言描述你的问题，最好能提供一个稳定简单的复现。🙏🙏🙏

如果你的信息提供过于模糊或不足，或者已经其他 issue 已经存在相关内容，你的 issue 有可能会被关闭。

Good luck and happy coding~

Sep 08 '20 10:09 taro-ui-bot[bot]

https://github.com/NervJS/taro-ui/issues/1169 https://github.com/NervJS/taro-ui/issues/1147 都是这个问题

Sep 08 '20 13:09 liutao-me

把 <AtButton formType='submit'>提交</AtButton> 改成 <AtButton type={"primary"}>提交</AtButton> 可以消除报错。对我是生效的，你可以试试。

Sep 15 '20 08:09 Laotree

把 <AtButton formType='submit'>提交</AtButton> 改成 <AtButton type={"primary"}>提交</AtButton> 可以消除报错。对我是生效的，你可以试试。

你这样貌似没有触发 onsubmit 事件呀

Sep 21 '20 15:09 liutao-me

把 <AtButton formType='submit'>提交</AtButton> 改成 <AtButton type={"primary"}>提交</AtButton> 可以消除报错。对我是生效的，你可以试试。

你这样貌似没有触发 onsubmit 事件呀

你手动指明onClick就可以触发了呀

        <AtButton
          type={"primary"}
          onClick={this.onSubmit}
        >提交</AtButton>

Sep 22 '20 01:09 Laotree

把 <AtButton formType='submit'>提交</AtButton> 改成 <AtButton type={"primary"}>提交</AtButton> 可以消除报错。对我是生效的，你可以试试。

你这样貌似没有触发 onsubmit 事件呀

你手动指明onClick就可以触发了呀
        <AtButton
          type={"primary"}
          onClick={this.onSubmit}
        >提交</AtButton>

你说的很对，回头我试一下。

Sep 22 '20 07:09 liutao-me

把 <AtButton formType='submit'>提交</AtButton> 改成 <AtButton type={"primary"}>提交</AtButton> 可以消除报错。对我是生效的，你可以试试。

你这样貌似没有触发 onsubmit 事件呀

你手动指明onClick就可以触发了呀
        <AtButton
          type={"primary"}
          onClick={this.onSubmit}
        >提交</AtButton>

这样的话好像并不是走的onSubmit，只是做了个点击事件，也拿不到表单内容了吧

Oct 28 '20 06:10 mulianju

把 <AtButton formType='submit'>提交</AtButton> 改成 <AtButton type={"primary"}>提交</AtButton> 可以消除报错。对我是生效的，你可以试试。

你这样貌似没有触发 onsubmit 事件呀

你手动指明onClick就可以触发了呀
        <AtButton
          type={"primary"}
          onClick={this.onSubmit}
        >提交</AtButton>
这样的话好像并不是走的onSubmit，只是做了个点击事件，也拿不到表单内容了吧

是的，但是呢，因为我当前页面的变量都存在state里，所以只需要有事件告诉我交数据即可，变量我从state里获取。

Oct 28 '20 06:10 Laotree

我个人感觉这个组件就基本没实质性的用法，因为他官方都说了“开发者要获取数据，可以自行在页面的 state 中获取”。所以我认为taro-ui的form表单还没作到位吧

Nov 02 '20 11:11 zhoubaibai

同样的问题……那么只能一个个手动获取 form 中的值吗？那也太麻烦了吧

Nov 03 '20 07:11 twoheartliu

有解决办法？

Nov 06 '20 05:11 yuanjinxiugithub

@twoheartliu @yuanjinxiugithub 面向对象的思路：你把form当成一个对象，即state里的obj，在render里绑定value时，都使用obj.value，这样，当你接收submit时，form的值都在obj，就免去了手动获取了。

Nov 06 '20 06:11 Laotree

我个人感觉这个组件就基本没实质性的用法，因为他官方都说了“开发者要获取数据，可以自行在页面的 state 中获取”。所以我认为taro-ui的form表单还没作到位吧

作者的原话是：
携带 form 中的数据触发 submit 事件，由于小程序组件化的限制，onSubmit 事件获得的 event 中的 event.detail.value 始终为空对象，开发者要获取数据，可以自行在页面的 state 中获取

我想，可能他们考虑到把form可以包罗的成员情况都覆盖，会使得组件没有那么干净；覆盖一部分，也使用者改造更费劲，不如直接给白坯房，这样造起轮子简便。

Nov 06 '20 07:11 Laotree

应该添加几个表单校验的方法，还不够完善，不是那么好用

Dec 31 '20 02:12 zhangjiaoalice

mark

Jan 08 '21 07:01 zhengchalei

应该添加几个表单校验的方法，还不够完善，不是那么好用

可以借助rc-field-form实现表单校验相关功能，但是UI库连基本的调用微信Button的formType报错就离谱；更离谱的是，就这一个小的bug，github issues上能追溯到5月份之前；

所以这个库应该是死了

Jan 14 '21 03:01 preflower

<AtForm>

        <AtInput
            required
            name="value"
            title="文本"
            type="text"
            placeholder="单行文本"
            :value="value"
            :onChange="handleChange"
        />
        <button formType="submit" :tag="onSubmit()">提交</button>
        <button formType="reset" :tag="onReset">重置</button>
    </AtForm>

这样写完全ok啊****

Jan 19 '21 09:01 wzhenkaki

表单结合列表渲染不能通过 onSubmit 获取表单数据，怎么才能获取表单中每一个 Input 的值呢

Jan 29 '21 05:01 my-petrichor

这bug太扯了。可以先去掉这种描述啊...又不能用formType

Aug 22 '21 06:08 Lpbzzz

同样被坑了的过来插个眼

Nov 23 '21 07:11 xzjs

俺也一样

Nov 23 '21 08:11 dztzAdmin

俺也一样

Dec 20 '21 07:12 huangj17

俺也一样

Jan 06 '22 05:01 bugfix2020

俺也一样

Jan 27 '22 01:01 brady2037

一模一样

Jan 27 '22 01:01 Derekgogo

插个眼打个野

Sep 02 '22 08:09 wangjianxiang

我个人感觉这个组件就基本没实质性的用法，因为他官方都说了“开发者要获取数据，可以自行在页面的 state 中获取”。所以我认为taro-ui的form表单还没作到位吧
作者的原话是：
携带 form 中的数据触发 submit 事件，由于小程序组件化的限制，onSubmit 事件获得的 event 中的 event.detail.value 始终为空对象，开发者要获取数据，可以自行在页面的 state 中获取
我想，可能他们考虑到把form可以包罗的成员情况都覆盖，会使得组件没有那么干净；覆盖一部分，也使用者改造更费劲，不如直接给白坯房，这样造起轮子简便。

把 <AtButton formType='submit'>提交</AtButton> 改成 <AtButton type={"primary"}>提交</AtButton> 可以消除报错。对我是生效的，你可以试试。

你这样貌似没有触发 onsubmit 事件呀

你手动指明onClick就可以触发了呀
        <AtButton
          type={"primary"}
          onClick={this.onSubmit}
        >提交</AtButton>
这样的话好像并不是走的onSubmit，只是做了个点击事件，也拿不到表单内容了吧
是的，但是呢，因为我当前页面的变量都存在state里，所以只需要有事件告诉我交数据即可，变量我从state里获取。

可是这样submit出去会undefine，你知道怎么处理么？

Jan 09 '23 16:01 Codermargin

        <AtInput
            required
            name="value"
            title="文本"
            type="text"
            placeholder="单行文本"
            :value="value"
            :onChange="handleChange"
        />
        <button formType="submit" :tag="onSubmit()">提交</button>
        <button formType="reset" :tag="onReset">重置</button>
    </AtForm>

这样写完全ok啊****

这样就是受控组件了个人对受控模式非常反感

Jan 10 '23 01:01 bugfix2020

您的邮件已收到！谢谢！

Jan 10 '23 01:01 Codermargin

taro-ui taro-ui copied to clipboard

taro-ui 3.0.0-alpha.3 表单组件 AtForm 提交按钮点击后报错

Taro UI 版本信息

问题描述

复现步骤

复现代码

报错信息

系统信息

补充信息

<AtForm>

taro-ui
taro-ui copied to clipboard