Form

表单。将组件内的用户输入的 switch input checkbox slider radio picker 提交。

当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。

参考文档

类型

  1. ComponentType<FormProps>

示例代码

  • React
  • Vue
  1. class App extends Component {
  2. formSubmit = e => {
  3. console.log(e)
  4. }
  5. formReset = e => {
  6. console.log(e)
  7. }
  8. render () {
  9. return (
  10. <Form onSubmit={this.formSubmit} onReset={this.formReset} >
  11. <View className='example-body'>
  12. <Switch name='switch' className='form-switch'></Switch>
  13. </View>
  14. </Form>
  15. )
  16. }
  17. }
  1. <template>
  2. <form @submit="formSubmit" @reset="formReset" >
  3. <view class="taro-example-body">
  4. <switch name="switch" class="form-switch"></Switch>
  5. </view>
  6. <view class="taro-example-btns">
  7. <button form-type="submit">Submit</button>
  8. <button type="default" form-type="reset">Reset</button>
  9. </view>
  10. </form>
  11. </template>
  12. <script>
  13. export default {
  14. data() {
  15. return {}
  16. },
  17. methods: {
  18. formSubmit (e) {
  19. console.log(e)
  20. },
  21. formReset (e) {
  22. console.log(e)
  23. }
  24. }
  25. }
  26. </script>

FormProps

参数类型默认值必填说明
reportSubmitbooleanfalse是否返回 formId 用于发送模板消息。
reportSubmitTimeoutnumber0等待一段时间(毫秒数)以确认 formId 是否生效。
如果未指定这个参数,formId 有很小的概率是无效的(如遇到网络失败的情况)。
指定这个参数将可以检测 formId 是否有效,
以这个参数的时间作为这项检测的超时时间。
如果失败,将返回 requestFormId:fail 开头的 formId
onSubmitBaseEventOrigFunction<onSubmitEventDetail>携带 form 中的数据触发 submit 事件
event.detail = { value : { name’: ‘value’}, formId: ‘’ }
onResetBaseEventOrigFunction<any>表单重置时会触发 reset 事件

API 支持度

API微信小程序H5React Native
FormProps.reportSubmit✔️✔️
FormProps.reportSubmitTimeout✔️
FormProps.onSubmit✔️✔️
FormProps.onReset✔️✔️✔️

onSubmitEventDetail

参数类型必填说明
value{ [formItemName: string]: any; }当点击 <form> 表单中 form-typesubmit<button> 组件时,
会将表单组件中的 value 值进行提交,
需要在表单组件中加上 name 来作为 key
formIdstringreportSubmittrue 时,返回 formId 用于发送模板消息。

API 支持度

API微信小程序H5React Native
Form✔️✔️✔️