antd form.setFieldsValue问题总结
1.嵌套组件form实例如何传递
想要使用form.setFieldsValue
就需要实例出form对象,但是如果是如下的嵌套组件结构该怎么传递呢,antd官方给我们提供了方法
const [form] = Form.useForm()
...
<Form layout="vertical" form={form}>
<Card title="经营目标" extra={<Button type="primary">保存</Button>}>
<Tabs
animated={{ inkBar: true, tabPane: true }}
onChange={onChange}
items={items}
tabBarGutter={8.13}
/>
</Card>
</Form>
...
子组件则只需要使用官方提供的Form.useFormInstance()
即可获得上下文中的form
...
// 获取当前上下文正在使用的 Form 实例
const form = Form.useFormInstance();
...
// 改变对应input的值
const profit = () => {
// setFieldsValue({name:"value"})
form.setFieldsValue({
SCProfitMargin: '11111', // 对应第一个SCProfitMargin input
VCProfitMargin: '22222', // 对应第二个VCProfitMargin input
SCendProfitMargin: "3333333",
VCendProfitMargin: "444444"
})
}
...
2.form.setFieldsValue不生效可能是这个原因
当你使用form.setFieldsValue
重新设置input的值的时候,他也许不会生效,看看你的html结构是否是这样的
这样的结构
Form.Item
不会关联到指定input,所以官方又提供了一个新的方案
<Form.Item
name="target"
label='Amazon'
rules={[{ required: true }]}
>
<Input.Group compact>
<Input
onBlur={lowPriceOnblur}
style={{ width: '185px', height: '32px' }}
defaultValue="默认值"
/>
<Button type="primary">打开</Button>
</Input.Group>
</Form.Item>
更改后
noStyle是为了让内层
Form.Item
失去样式不造成冲突
<Form.Item
label='Amazon'
>
<Input.Group compact>
<Form.Item name="target" noStyle rules={[{ required: true }]} >
<Input
onBlur={lowPriceOnblur}
style={{ width: '185px', height: '32px' }}
defaultValue="默认值"
/>
</Form.Item>
<Button type="primary">打开</Button>
</Input.Group>
</Form.Item>