Form フォームで複数の要素を使用する方法

製品には共通の要件があります.
入力ボックスの後ろに説明テキストまたはその他のコンポーネントがあります.
ここに画像の説明を挿入
私たちはこのように書くかもしれません.

<Form.Item
  name="firstName"
  label="姓名"
  rules={[{ required: true, message: '请输入姓名!' }]}
>
    <Row gutter={8}>
      <Col span={12}>
        <Input defaultValue={detail?.firstName} />
      </Col>
      <Col span={8}>
        <Button
          type="default"
          onClick={() => {
            setEditParam((pre) => ({ ...pre, firstName: false }));
          }}
        >
          取消
        </Button>
        &nbsp;&nbsp;
        <Button
          type="primary"
          onClick={() => {
            onSubmit('firstName');
          }}
        >
          确定
        </Button>
      </Col>
    </Row>
</Form.Item>

Form.Item の直接のサブ要素は Input、Select などではないため、現時点ではform.getFieldsValue()フォーム内のデータを取得できません。

値を取得するには、フォーム自体にいくつかのメソッドを追加する必要がある場合があります

antd フォームフォームを参照してください

演示 Form.Item 内有多个元素的使用方式。<Form.Item name="field" /> 只会对它的直接子元素绑定表单功能，例如直接包裹了 Input/Select。如果控件前后还有一些文案或样式装点，或者一个表单项内有多个控件，你可以使用内嵌的 Form.Item 完成。你可以给 Form.Item 自定义 style 进行内联布局，或者添加 noStyle 作为纯粹的无样式绑定组件(3.x の getFieldDecorator に似ています)。

- <Form.Item label="Field" name="field">
-   <Input />
- </Form.Item>
+ <Form.Item label="Field">
+   <Form.Item name="field" noStyle><Input /></Form.Item> // 直接包裹才会绑定表单
+   <span>description</span>
+ </Form.Item>

コードを変更する

 <Form.Item label="性别">
     <Space>
       <Form.Item name="gender" noStyle>
         <Select>
           <Select.Option value={1} label="男">
             男
           </Select.Option>
           <Select.Option value={2} label="女">
             女
           </Select.Option>
         </Select>
       </Form.Item>
       <Button
         type="default"
         onClick={() => {
           setEditParam({ ...editParams, gender: false });
         }}
       >
         取消
       </Button>
       <Button
         type="primary"
         onClick={() => {
           onSubmit('gender');
         }}
       >
         确定
       </Button>
     </Space>
</Form.Item>

この時点で、 form.getFieldsValue() を使用すると有効になります!

Form フォームで複数の要素を使用する方法

おすすめ