antd Form表单initialValue设置无效的问题之一

最新推荐文章于 2023-05-12 15:20:12 发布

原创最新推荐文章于 2023-05-12 15:20:12 发布 · 7.4k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #reactjs

react.js 同时被 3 个专栏收录

9 篇文章

订阅专栏

antd

5 篇文章

订阅专栏

ant-design

5 篇文章

订阅专栏

本文揭示了Ant Design表单组件中initialValue设置无效的问题，指出当表单组件被<></>或<div></div>等包裹时，initialValue将失效。正确做法是直接将输入组件置于getFieldDecorator返回的函数内，避免包裹元素。

在表格数据中，编辑数据时用到的表单需要使用initialValue 来设置初始值，
以下写法会导致initialValue设置无效。
当表单组件被<></> ，< div></ div> 等包裹时，initialValue设置无效

// initialValue 设置无效的写法
<Form.Item label="xxx">
	{getFieldDecorator('xxx',{
		initialValue:'default'
})(
	<>
		<Input  />
		<span>....</span>
	</>
)			
	}
</Form.Item>

// 正确的写法
<Form.Item label="xxx">
	{getFieldDecorator('xxx',{
		initialValue:'default'
})(
	<Input  />
)			
	}
	// <span></span>
</Form.Item>