Skip to main content
Version: 3.x

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

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>
)
}
}

FormProps

PropertyTypeDefaultRequiredDescription
reportSubmitbooleanfalseNoSpecifies whether to return the formId for sending a Message Template.
reportSubmitTimeoutnumber0NoDuration (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.
onSubmitBaseEventOrigFunction<onSubmitEventDetail>NoTriggers a submit event that carries the form data.
event.detail = { value : { name': 'value'}, formId: '' }
onResetBaseEventOrigFunction<any>NoTriggers a submit event that carries the form data.

Property Support

PropertyWeChat Mini-ProgramH5React Native
FormProps.reportSubmit✔️✔️
FormProps.reportSubmitTimeout✔️
FormProps.onSubmit✔️✔️
FormProps.onReset✔️✔️✔️

onSubmitEventDetail

ParamTypeRequiredDescription
value{ [formItemName: string]: any; }NoWhen 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.
formIdstringNoWhen reportSubmit is true, returns formId for sending template messages.

API Support

APIWeChat Mini-ProgramH5React Native
Form✔️✔️✔️