Antd Form.Item相互嵌套，里层的值修改最外层的值

最新推荐文章于 2025-03-03 10:31:42 发布

慢半拍、

最新推荐文章于 2025-03-03 10:31:42 发布

阅读量2.1k

点赞数 1

分类专栏： React 文章标签： antd Form.Item

本文链接：https://blog.youkuaiyun.com/huanhuan03/article/details/116784854

版权

React 专栏收录该内容

23 篇文章

订阅专栏

博客内容涉及React组件Form.Item和InputGroup的交互处理。通过Form.Item包裹ChildrenCom组件，内部使用InputGroup创建多个Input，每个Input的onChange事件通过传递的handleChange函数进行统一处理。handleChange函数根据传入的index参数来区分不同Input的变更，并将值设为44444，以影响name='total_list'的值。

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

标题可能有点拗口，意思是这样：

<Form.Item name='total_list'>
        <ChildrenCom />
</Form.Item>

function InputGroup({ onChange }){     //  注意：这个参数onChange是接收的name='total_list'的onChange事件
		const handleChange(e, index) => {
				onChange(44444)   // 这里传什么参数进去，则你最后获取的name='total_list'的值就是啥
		}
		return (<> 
				<Form.Item name={`jurisdiction__0`}>
				        <Input id={`jurisdiction__0`} onChange={e => handleChange(e, 0)} />
				</Form.Item>
				<Form.Item name={`jurisdiction__1`}>
				        <Input id={`jurisdiction__1`} onChange={e => handleChange(e, 1)} />
				</Form.Item>
				<Form.Item name={`jurisdiction__2`}>
				        <Input id={`jurisdiction__2`} onChange={e => handleChange(e, 2)} />
				</Form.Item>
		</>)
}