Ant Design of React @3.10.9

Pull the project luwei.web.study-ant-design-pro and switch to the Query branch to see how the Form is implemented

Implement a query form

Train of thought

  1. The Create form:@Form.create()
  2. Form data bindinggetFieldDecorator
  3. Render the query condition of the query formrender <Form.Item>
  4. Gets the value of the query conditionvalidateFields

code

1. Create form:@Form.create()

Form.create()

This is a higher-order functions, the incoming is the react components, return a new react components, within the function on the modification of the incoming components, add some methods for some secret operation If you have the high order component has to in-depth please click “understand the React high-order component”, we don’t do too much here.

A component wrapped with form.create () will have its own this.props. Form property

// Use it as follows:
class CustomizedForm extends React.Component {}
CustomizedForm = Form.create({})(CustomizedForm);
Copy the code

The code is created with @form.create () in conjunction with the @ modifier.

2. Form data bindinggetFieldDecorator

getFieldDecorator(id, options)

Used for bidirectional binding with forms

<! -- Form data binding -->
<Form.Item {. formItemLayout} label={'name'} >
	{getFieldDecorator('searchName')(
		<Input placeholder={'Please enter a name '} />
	)}
</Form.Item>
Copy the code

3. Render the query conditions of the query formrender <Form.Item>

When defining the form fields, render them to the page, as in Step 2

See Ant design-form-.item for more FormItem attributes

4. Obtain the value of the query conditionvalidateFields

form.validateFields / validateFieldsAndScroll

Validates and gets a set of input field values and Error, and if the fieldNames parameter is null, validates all components

const { form } = this.props;

// Get and check the form data
form.validateFields((err, fieldsValue) = > {
  	if (err) return;
  	const { searchName = ' ' } = fieldsValue;
});
Copy the code

Insight into the

  • Ant Design Form Form

  • rc-form

  • Antd source code interpretation (9) – Form

  • About the author: Li Yaohui, Reed Technology Web front-end development engineer, representative works: Feihuating small program, continuation gene, YY emoticon red envelope, YY stack square live competition mini game. Good at website construction, public account development, wechat small program development, small games, public account development, focus on front-end framework, server-side rendering, SEO technology, interaction design, image rendering, data analysis and other research.

    Join us: [email protected] visit www.talkmoney.cn to learn more