Antd中的getFieldDecorator用法和注意事项

getFieldDecorator是form表单的一个方法，接收两个参数

第一个参数是表单对应的字段

第二个是验证规则 该方法本身返回一个方法，需要将获取值的标签包裹进去

getFieldDecorator ( “自定义控件名”，{ 表单规则 } ) (“取值标签” )
 

<Form.Item>

        {getFieldDecorator('userName', {

          initialValue: 'Jack',

          rules: [

            {

              required: true,

              message: '请输入用户名',

            },

            {

              max: 10,

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

            },

          ],

        })(<Input/>)}

      </Form.Item>

效果：

第二个括号中的组件用一个气泡组件<Popover></Popover>包裹的时候

监听不到input输入框内容的变化

 

<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：

使用getFieldValue的可以获取由getFieldDecorator绑定的控件的值

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

getFieldValue('name')