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.
Type
ComponentType<FormProps>
Examples
- React
- Vue
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>
)
}
}
<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 | ✔️ | ✔️ | ✔️ |