首页 前端知识 antd form.setFieldsValue问题总结

antd form.setFieldsValue问题总结

2024-04-19 21:04:36 前端知识 前端哥 745 654 我要收藏

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>

2.more…

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5320.html
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!