Ant Design of React @3.10.9

Pull the project luwei.web.study-ant-design-pro and switch to the Add branch to see the Form implementation effect

Implement a new 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. Define form validation criteria rules
  5. Sets the values of a set of input controlssetFieldsValue
  6. Gets the value of the query conditionvalidateFields

Different from Form Form (a), new Form verification conditions and set the value of the control two points.

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. Define form verification rules

<Form.Item {...formItemLayout} label="名称">
	{getFieldDecorator('name', {
		rules: [
		  {
			  required: true,
			  message: '必填',
		  },
		],
		initialValue: this.state.name,
})(<Input placeholder="请输入名称" maxLength={25} />)}
Copy the code

For details about the verification rules, see Ant Design-Form Verification Rules

5. Set setFieldsValue for a set of input controls

this.props.form.setFieldsValue({
  name: `hello world`});Copy the code

Usage Scenarios:

  1. Add information to leave each field blank
  2. Update information to set the original data in relative form controls.

setFieldsValue

Dynamically sets/controls the values of controls in a form

Pay attention to

  1. usegetFieldsValue getFieldValue setFieldsValueWait, make sure the corresponding field is already in usegetFieldDecoratorYes.
  2. Set the values of a set of input controlscomponentWillReceivePropsInternal use, otherwise it will lead to an endless loop

6. 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