The reason I started writing this article is that the echo, the complex form echo, made me think that I had misunderstood the initialValue property.

I. Origin and definition of initialValue

initialValue

AntDesign/Form Form a/getFieldDecorator (id, options) decorator function/the second parameter options/options. The initialValue.

Ant. Design/Components /…

The official explanation for the attribute initialValue is as follows:

The keyword is “initialValue of the child node”, and the initialValue is also the default value. For example, if there is a city selector in the Form, the default value is “hangzhou”, then initialValue is the value corresponding to hangzhou.

So I always thought initialValue was the same thing as defaultValue.

InitialValue and defaultValue

  1. An example of defaultValue

import React, { Component,Fragment } from ‘react’; import { Button,Input } from “antd”; export default class CreateFrom extends Component { state={value:”value”} updateValue = () => { This.setstate ({value:”newValue”})} render() {return (update value); }}

Note: When the component is rendered, the value in the Input is “value”. When I click the “Update Value button”, the value in the Input is not updated.

An Input component without a value attribute is an uncontrolled component. It needs to set defaultValue. If the user does not manually change Input, Input will always display the value pointed to by defaultValue. Value is the true value of the Input component when it was first rendered, and the true value pointed to by a variable or constant. The knowledge of controlled and uncontrolled components is covered here and not extended.

  1. An example of intialValue

1) models/list. Js

let count = 1; Const CITY = [” hangzhou “,” Beijing “,” Shanghai “,” Guangzhou “,” Shenzhen “]; export default { namespace: ‘list’,

state: { citys: CITY, detail:{city:CITY[count%5],count} },

effects: FetchDetail ({payload}, {call, put}) {fetchDetail({payload}, {call, put}) {fetchDetail({payload}, {call, put}) {fetchDetail({payload}, {call, put}) { count++; yield put({ type: ‘queryDetail’, payload: {city:CITY[count%5],count}, }); }},

reducers: { queryDetail(state, action) { return { … state, detail: action.payload, }; }}};

2) Router component file

import React, { Component } from ‘react’; import { connect } from “dva”; import { InputNumber,Select,Form,Button } from “antd”;

const FormItem = Form.Item; const { Option } = Select; const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 2 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 22}.}}; @connect(({list})=>({ citys:list.citys, detail:list.detail })) class CreateFrom extends Component { getDetail = () => { this.props.dispatch({type:”list/fetchDetail”}); } render() { const { form,detail={},citys=[] } = this.props; const { getFieldDecorator } = form; const { city,count } = detail; return (

export default Form.create()(CreateFrom);

Description: When the Form component is rendered, receive props. Detail, because the state of the models/list.js file is initialized, so the first render is rendered with “Hangzhou” and “1”, click “retrieve data button”, The detail changes to {city:” Beijing “,count:2}, and the rendered value of the Form changes accordingly.

Uhmmm is not the same as defaultValue. What happened to the default value? What happened to not changing with the data? Are you kidding me or

The initialValue value can be updated except in two cases:

    1. The user manually updates the form data, such as inInput manually in the component, select manually in the component, and so on. After the user manually updates the data, the initialValue change does not update the form value. When the setFieldsValue method is executed, the initialValue change does not update the form value. In the following example, the setFieldsValue method is implemented in the lifecycle function componentDidMount. Other things being equal, you’ll notice that no matter how much you click the “retrieve data button,” the value for the city is not updated, while the value for the total is always updated. If you manually change the total input and click the “Retrieve data button”, the city and total values will not be updated. import React, { Component } from ‘react’; import { connect } from “dva”; import { InputNumber,Select,Form,Button } from “antd”; const FormItem = Form.Item; const { Option } = Select; const formItemLayout = { labelCol: { xs: { span: 24 }, sm: { span: 2 }, }, wrapperCol: { xs: { span: 24 }, sm: { span: 22}.}}; @connect(({list})=>({ citys:list.citys, detail:list.detail })) class CreateFrom extends Component { componentDidMount(){ This. Props. Form. SetFieldsValue ({city: “Shanghai”}); } getDetail = () => { this.props.dispatch({type:”list/fetchDetail”}); } render() { const { form,detail={},citys=[] } = this.props; const { getFieldDecorator } = form; const { city,count } = detail; Return (retrieve data <FormItem {… FormItemLayout} label=” City “> {getFieldDecorator(‘city’, {initialValue: city, rules: [{required: true, message: ‘please select cities’}],}) ({citys. The map (item = > {item})})} < FormItem {… FormItemLayout} label=” Total “> {getFieldDecorator(‘count’, {initialValue:count, rules: [{required: true, message: ‘total amount (1-99999999), the pattern: / ^ (1-9] [0-9] {0, 7} $/}], ()}})); }}

      export default Form.create()(CreateFrom);

      It looks like the form echo is turning a corner… Three, read aloud

      Don’t hate “setFieldsValue” in your code every time you mention a form echo. This will make your code look bad. Very!!!! Very!!!! Very!!!! Very inelegant!!

      I love the line on the cover of Sharp jQuery, “Every bit more I learn, I write a bit less code.” It’s my code credo.

      Stack is a cloud native – site-based data central-platform PaaS, and we have an interesting open source project on Github and Gitee: FlinkX is a batch data synchronization tool based on Flink. It can collect static data and real-time data. It is a data synchronization engine with all-domain, heterogeneous and batch integration. If you like, please give us a star! Star! Star!

      Github open Source project: github.com/DTStack/fli…

      Gitee Open Source project: gitee.com/dtstack_dev…