Form - 《Taro 文档帮助手册教程》

sidebar_label: Form
Type
Examples
FormProps
- Property Support
- onSubmitEventDetail
API Support

title: Form

sidebar_label: Form

Form. It is used to submit the switch, input, checkbox, slider, radio, and picker that are entered by the user in the component.

In the form, when the button component in which form-type is set to submit is tapped, the value in the form component will be submitted. You need to add name to the form component as the key.

Reference

Type

ComponentType<FormProps>

Examples

import Tabs from ‘@theme/Tabs’ import TabItem from ‘@theme/TabItem’

tsx
class App extends Component {

  formSubmit = e => {
    console.log(e)
  }

  formReset = e => {
    console.log(e)
  }

  render () {
    return (
      <Form onSubmit={this.formSubmit} onReset={this.formReset} >
        <View className='example-body'>
          <Switch name='switch' className='form-switch'></Switch>
        </View>
      </Form>
    )
  }
}

html
<template>
  <form @submit="formSubmit" @reset="formReset" >
      <view class="taro-example-body">
        <switch name="switch" class="form-switch"></Switch>
      </view>
      <view class="taro-example-btns">
        <button form-type="submit">Submit</button>
        <button type="default" form-type="reset">Reset</button>
    </view>
  </form>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    formSubmit (e) {
      console.log(e)
    },

    formReset (e) {
      console.log(e)
    }
  }
}
</script>

FormProps

Property	Type	Default	Required	Description
reportSubmit	`boolean`	`false`	No	Specifies whether to return the formId for sending a Message Template.
reportSubmitTimeout	`number`	`0`	No	Duration (in ms) before confirmation on whether the formId takes effect timed out. If this parameter is not specified, there is a low probability (for example, in case of network failure) that the formId does not take effect. Specifying this parameter allows you to detect whether the formId takes effect before timeout. If failed, a formId prefixed with requestFormId:fail is returned.
onSubmit	`BaseEventOrigFunction<onSubmitEventDetail>`		No	Triggers a submit event that carries the form data. event.detail = {`{ value : { name': 'value'}, formId: '' }`}
onReset	`BaseEventOrigFunction<any>`		No	Triggers a submit event that carries the form data.

Property Support

Property	WeChat Mini-Program	H5	React Native
FormProps.reportSubmit	✔️	✔️
FormProps.reportSubmitTimeout	✔️
FormProps.onSubmit	✔️		✔️
FormProps.onReset	✔️	✔️	✔️

onSubmitEventDetail

Param	Type	Required	Description
value	`{{ [formItemName: string]: any; }}`	No	When the `<button>` component of a `<form>` form with a `form-type` of submit is clicked, the the `value` in the form component is submitted. You need to add `name` as the `key` in the form component.
formId	`string`	No	When `reportSubmit` is `true`, returns `formId` for sending template messages.

API Support

API	WeChat Mini-Program	H5	React Native
Form	✔️	✔️	✔️