antd form.setFieldsValue问题总结

最新推荐文章于 2024-10-14 17:29:46 发布

FØund404

最新推荐文章于 2024-10-14 17:29:46 发布

阅读量6.7k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： React 文章标签： html 前端 react.js typescript

本文链接：https://blog.csdn.net/bl_ack233/article/details/128042161

React 专栏收录该内容

14 篇文章

订阅专栏

本文总结了在Ant Design中使用`Form.setFieldsValue`时遇到的问题及其解决办法。首先，介绍了如何在嵌套组件中传递并使用`Form`实例，利用`Form.useFormInstance()`获取上下文中的form对象来设置子组件的输入值。其次，针对`setFieldsValue`不生效的情况，分析了原因并提供了解决方案，即确保`Form.Item`正确包裹输入元素，特别是对于内嵌组件，需使用`noStyle`属性保持样式不冲突。文章旨在帮助开发者更好地理解和应用`Antd Form`的字段值设置功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>