Usage and precautions of getFieldDecorator in Antd

getFieldDecorator is a method of the form, receiving two parameters

The first parameter is the field corresponding to the form

The second is the verification rule. The method itself returns a method, and the label for obtaining the value needs to be wrapped in it.

getFieldDecorator ("custom control name", {form rule}) ("value label")
 

<Form.Item>

        {getFieldDecorator('userName', {

          initialValue: 'Jack',

          rules: [

            {

              required: true,

              message: '请输入用户名',

            },

            {

              max: 10,

              message: '不得超过10个字符',

            },

          ],

        })(<Input/>)}

      </Form.Item>

Effect:

When the component in the second bracket is wrapped with a bubble component <Popover></Popover>

Unable to detect changes in the content of the input box


 

<Form.Item>

        {getFieldDecorator('userName', {

          initialValue: 'Jack',

          rules: [

            {

              required: true,

              message: '请输入用户名',

            },

            {

              max: 10,

              message: '不得超过10个字符',

            },

          ],

        })(

          <Popover content={content} title="Title">

            <Input placeholder="请输入用户名" />

          </Popover>

        )}

      </Form.Item>

getFieldValue:

Use getFieldValue to get the value of the control bound by getFieldDecorator

getFieldValue(`rules[${index}].name`)   //自定义字段名字为变量的时候

getFieldValue('name')

Guess you like

Origin blog.csdn.net/r8577/article/details/127736722