Form
表单。将组件内的用户输入的 switch input checkbox slider radio picker 提交。
当点击 form 表单中 form-type 为 submit 的 button 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key。
支持情况:
类型
ComponentType<FormProps>
示例代码
- 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
参数 | 类型 | 默认值 | 必填 | 说明 |
---|---|---|---|---|
reportSubmit | boolean | false | 否 | 是否返回 formId 用于发送模板消息。 |
reportSubmitTimeout | number | 0 | 否 | 等待一段时间(毫秒数)以确认 formId 是否生效。如果未指定这个参数, formId 有很小的概率是无效的(如遇到网络失败的情况)。指定这个参数将可以检测 formId 是否有效,以这个参数的时间作为这项检测的超时时间。 如果失败,将返回 requestFormId:fail 开头的 formId 。 |
reportType | string | 'default' | 否 | 模板消息的类型,report-submit 为 true 时填写有效 取值:default / subscribe |
templateId | string or string[] | 否 | 发送订阅类模板消息所用的模板库标题 ID ,可通过 getTemplateLibraryList 获取 当参数类型为 Array 时,可传递 1~3 个模板库标题 ID (注:此处填写模板库id。示例:BD0001) | |
subscribeId | string | 否 | 发送订阅类模板消息时所使用的唯一标识符,内容由开发者自定义,用来标识订阅场景 注意:同一用户在同一 subscribe-id 下的多次授权不累积下发权限,只能下发一条。若要订阅多条,需要不同 subscribe-id | |
conversionTarget | number | 0 | 否 | 用于分发目的。取值:0 或 1,其中 0 表示默认,1 表示留资目标,需要和留资分发配置一起使用,详情见留资分发配置 |
clueComponentId | string | "" | 否 | 用于分发目的。开发者在【小程序开发者后台 -> 进入目标小程序 -> 运营 -> 流量配置 -> 抖音 -> 留资分发配置】复制创建的配置 ID,需要和留资分发配置一起使用,详情见留资分发配置 |
onSubmit | CommonEventFunction<onSubmitEventDetail> | 否 | 携带 form 中的数据触发 submit 事件 | |
onReset | CommonEventFunction | 否 | 表单重置时会触发 reset 事件 |
API 支持度
API | 微信小程序 | 百度小程序 | 支付宝小程序 | 抖音小程序 | QQ 小程序 | 京东小程序 | H5 | React Native | Harmony | Harmony hybrid |
---|---|---|---|---|---|---|---|---|---|---|
FormProps.reportSubmit | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |||
FormProps.reportSubmitTimeout | ✔️ | |||||||||
FormProps.reportType | ✔️ | |||||||||
FormProps.templateId | ✔️ | |||||||||
FormProps.subscribeId | ✔️ | |||||||||
FormProps.conversionTarget | ✔️ | |||||||||
FormProps.clueComponentId | ✔️ | |||||||||
FormProps.onSubmit | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | |
FormProps.onReset | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ | ✔️ |
onSubmitEventDetail
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
value | { [formItemName: string]: any; } | 否 | 当点击 <form> 表单中 form-type 为 submit 的 <button> 组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上 name 来作为 key 。 |
formId | string | 否 | 当 reportSubmit 为 true 时,返回 formId 用于发送模板消息。 |