antd form.setFieldsValue问题总结

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

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

const [form] = Form.useForm()

...

保存}>

animated={{ inkBar: true, tabPane: true }}

onChange={onChange}

items={items}

tabBarGutter={8.13}

/>

...

子组件则只需要使用官方提供的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，所以官方又提供了一个新的方案

name="target"

label='Amazon'

rules={[{ required: true }]}

>

onBlur={lowPriceOnblur}

style={{ width: '185px', height: '32px' }}

defaultValue="默认值"

/>

更改后

noStyle是为了让内层Form.Item失去样式不造成冲突

label='Amazon'

>

onBlur={lowPriceOnblur}

style={{ width: '185px', height: '32px' }}

defaultValue="默认值"

/>

2.more…

好文推荐

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：