action

Specification

Action performed on the successful submit of the form.
This function is called only when the form is valid.

Definition

1
type Action = (params) => Promise<any>
Copied!

Parameters

Parameter name
Type
Description
serialized
Object
Serialized fields of the form.
fields
Object
Reference to all fields.
form
Object
Form component reference.
action function must always return a Promise.

Example

Simple example

1
import React from 'react'
2
import { Form } from 'react-advanced-form'
3
import { Input } from 'react-advanced-form-addons'
4
5
export default class RegistrationForm extends React.Component {
6
registerUser = ({ serialized, fields, form }) => {
7
return fetch('https://back.end/user', {
8
method: 'POST',
9
body: JSON.stringify(serialized),
10
})
11
}
12
13
render() {
14
return (
15
<Form action={this.registerUser}>
16
<Input
17
name="username"
18
label="Username"
19
required />
20
<Input
21
name="password"
22
label="Password"
23
required />
24
</Form>
25
)
26
}
27
}
Copied!
You can use onSerialize form prop to transform the serialized fields object prior to accepting them in the action handler.

Example with Redux

1
import React from 'react'
2
import { connect } from 'react-redux'
3
import { Form } from 'react-advanced-form'
4
import { Input } from 'react-advanced-form-addons'
5
import { registerUser } from '@store/user/actions'
6
7
class RegistrationForm extends React.Component {
8
registerUser = ({ serialized, fields, form }) => {
9
return this.props.registerUser(serialized)
10
}
11
12
render() {
13
return (
14
<Form action={this.registerUser}>
15
<Input
16
name="username"
17
label="Username"
18
required />
19
<Input
20
name="password"
21
label="Password"
22
required />
23
</Form>
24
)
25
}
26
}
27
28
export default connect(null, { registerUser })(RegistrationForm)
Copied!
You need to use a dedicated Redux middleware for the actions to return a Promise (i.e. redux-thunk or redux-saga).
Last modified 3yr ago