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

React

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

Vue

<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	✔️	✔️	✔️