产品中常有的一个需求
输入框后面有描述文案或其他组件
我们可能这样写
<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>
<Button
type="primary"
onClick={() => {
onSubmit('firstName');
}}
>
确定
</Button>
</Col>
</Row>
</Form.Item>
Form.Item里面的直接子元素不是Input, Select这些, 那么这个时候使用form.getFieldsValue()
获取表单内的数据是获取不到的
获取value值 你可能需要在表单自身添加一些方法
参考antd Form表单
演示 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>
修改code
<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()就会生效!