AntdにおけるgetFieldDecoratorの使い方と注意点

getFieldDecorator は、2 つのパラメータを受け取るフォームのメソッドです。

最初のパラメータはフォームに対応するフィールドです。

2つ目は検証ルールで、メソッド自体はメソッドを返しますが、その中に値を取得するためのラベルをラップする必要があります。

getFieldDecorator ("カスタム コントロール名", {フォーム ルール}) ("値ラベル")
 

<Form.Item>

        {getFieldDecorator('userName', {

          initialValue: 'Jack',

          rules: [

            {

              required: true,

              message: '请输入用户名',

            },

            {

              max: 10,

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

            },

          ],

        })(<Input/>)}

      </Form.Item>

効果:

2 番目の括弧内のコンポーネントがバブル コンポーネントでラップされている場合 <Popover></Popover>

入力ボックスの内容の変更を検出できません


 

<Form.Item>

        {getFieldDecorator('userName', {

          initialValue: 'Jack',

          rules: [

            {

              required: true,

              message: '请输入用户名',

            },

            {

              max: 10,

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

            },

          ],

        })(

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

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

          </Popover>

        )}

      </Form.Item>

getフィールド値:

getFieldValue を使用して、getFieldDecorator によってバインドされたコントロールの値を取得します

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

getFieldValue('name')

おすすめ

転載: blog.csdn.net/r8577/article/details/127736722