antd form.setFieldsValue问题总结

antd form.setFieldsValue问题总结

1.嵌套组件form实例如何传递

想要使用form.setFieldsValue就需要实例出form对象，但是如果是如下的嵌套组件结构该怎么传递呢，antd官方给我们提供了方法

const [form] = Form.useForm()
1

...
<Form layout="vertical" form={form}>
    <Card title="经营目标" extra={ type="primary">保存Button>}>
        <Tabs
        animated={{ inkBar: true, tabPane: true }}
        onChange={onChange}
        items={items}
        tabBarGutter={8.13}
        />
    Card>
Form>
...
1
2
3
4
5
6
7
8
9
10
11
12

子组件则只需要使用官方提供的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"
    })
  }
...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

更改后

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>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2.more…