In React, the UI layer means the render
function of the page component. Because of the flexibility of React, redundant logic are usually put into the render
method, which will easily lead to tremendous render
methods. When using antd.Form
component, initial values of form fields, form validation, transformation of form values to the UI components' props are all defined in page component. But this may not be a good practice. A clean
render method of page component should only concern about the representation logic, for example, the layout of components and user interactions.
To achieve this goal, where to place the initialization, validation of form, and the transformation of form values to components' props need to be taken into account. First, antd form's getFieldDecorator
method declare s the behaviour of one field with an configuration object. The object contains initial value of the field, the validating rules, and some tranformation function