antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题

formLayout 不起作用

Form标签 layout属性设置为’inline’ 时 下拉组件宽度没有自适应:

	// 方法1:用Row + Col 定义自己需要的宽度,把layout属性设置为'horizontal',
	const formLayout = {
            labelCol: { span: 4 },
            wrapperCol: { span: 14 },
          }
  --------------------------------------------------------------------------        
		<Form layout="horizontal" {...formLayout }>
			<Row>
				<Col span={6}>
					<Form.Item label="xxx">
						<Select>
							....
						</Select>
					</Form.Item>
				</Col>
				<Col span={6}>
					<Form.Item label="xxx">
							<Select>
								....
							</Select>
						</Form.Item>
				</Col>
            </Row>
		</Form>
		
	//方法2 给 Form.Item 手动设置宽度
	<Form layout="inline" {...formLayout }>
					<Form.Item label="xxx" style={{width:'25%'}}> //百分比
						<Select>
							....
						</Select>
					</Form.Item>
					<Form.Item label="xxx" style={{width:'200px'}}>// 固定宽度
							<Select>
								....
							</Select>
						</Form.Item>
		</Form>
  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
如果子组件是 Ant Design 的 Form 表单组件,可以通过以下两种方式进父子组件之间的通信: 1. 使用 React 的 Context API 使用 React 的 Context API 可以在父组件中定义一个 Context,然后在子组件中使用该 Context,从而实现父子组件之间的通信。 首先,在父组件中定义 Context: ```javascript import React, { createContext, useState } from 'react'; import { Form } from 'antd'; export const MyContext = createContext(); const ParentComponent = () => { const [form] = Form.useForm(); const [data, setData] = useState({}); const onFinish = (values) => { setData(values); }; return ( <MyContext.Provider value={{ data, form }}> <Form form={form} onFinish={onFinish}> {/* 子组件 */} </Form> </MyContext.Provider> ); }; export default ParentComponent; ``` 然后,在子组件中使用该 Context: ```javascript import React, { useContext } from 'react'; import { MyContext } from './ParentComponent'; const ChildComponent = () => { const { data, form } = useContext(MyContext); return ( <div> <p>{data.name}</p> <Form.Item label="Name" name="name"> <Input /> </Form.Item> </div> ); }; export default ChildComponent; ``` 2. 将子组件作为函数组件传递给父组件 将子组件作为函数组件传递给父组件,可以在子组件中通过 props 获取父组件传递的 Form 实例,从而实现父子组件之间的通信。 首先,在父组件中将 Form 实例传递给子组件: ```javascript import React, { useState } from 'react'; import { Form } from 'antd'; import ChildComponent from './ChildComponent'; const ParentComponent = () => { const [form] = Form.useForm(); const [data, setData] = useState({}); const onFinish = (values) => { setData(values); }; return ( <Form form={form} onFinish={onFinish}> <ChildComponent form={form} data={data} /> </Form> ); }; export default ParentComponent; ``` 然后,在子组件中通过 props 获取 Form 实例: ```javascript import React from 'react'; import { Form, Input } from 'antd'; const ChildComponent = ({ form, data }) => { return ( <div> <p>{data.name}</p> <Form.Item label="Name" name="name"> <Input /> </Form.Item> </div> ); }; export default ChildComponent; ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值