antdesign Form组件下方按钮
时间: 2023-08-03 15:08:54 浏览: 49
antdesign的Form组件可以通过`Form.Item`包裹按钮来实现下方按钮的效果。具体做法如下:
1. 在Form组件中添加Form.Item,将需要放置在下方的按钮放入Form.Item中。
```
<Form>
<Form.Item>
<Button type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
```
2. 为Form.Item添加`wrapperCol={{ offset: 8, span: 16 }}`属性,使其占据整个表单宽度。
```
<Form>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Button type="primary" htmlType="submit">提交</Button>
</Form.Item>
</Form>
```
其中,`offset: 8`表示左侧留出8个栅格,`span: 16`表示占据16个栅格,因此总宽度为24个栅格,与表单宽度一致。
这样,按钮就会在表单的下方居中显示了。
相关问题
antdesign Form组件下方多出返回按钮
如果需要在antdesign的Form组件下方添加返回按钮,可以将返回按钮和提交按钮放在同一个`Form.Item`中,并使用`Row`和`Col`组件进行布局。
具体做法如下:
1. 在Form组件中添加Form.Item,将返回按钮和提交按钮放入同一个Form.Item中。
```
<Form>
<Form.Item wrapperCol={{ offset: 8, span: 16 }}>
<Row>
<Col span={12}>
<Button type="primary" htmlType="submit">提交</Button>
</Col>
<Col span={12}>
<Button onClick={handleCancel}>返回</Button>
</Col>
</Row>
</Form.Item>
</Form>
```
2. 使用`Row`和`Col`组件进行布局,将提交按钮和返回按钮放在同一行中。其中,`span={12}`表示每个按钮占据12个栅格,总宽度为24个栅格,与表单宽度一致。
这样,返回按钮和提交按钮就会在表单的下方居中显示了。
ant design中form组件validatetrigger怎么用
在 Ant Design 中,`Form` 组件提供了多种验证方式,可以通过设置 `validateTrigger` 属性来指定触发验证的时机。默认情况下,`validateTrigger` 属性的值为 `'onChange'`,即在表单项的值发生变化时进行验证。除此之外,还有 `'onBlur'`、`'onSubmit'` 等多种验证时机可供选择。
以下是一个示例:
```jsx
import { Form, Input, Button } from 'antd';
const layout = {
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
};
const tailLayout = {
wrapperCol: {
offset: 8,
span: 16,
},
};
const Demo = () => {
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
return (
<Form
{...layout}
name="basic"
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
>
<Form.Item
label="用户名"
name="username"
rules={[
{
required: true,
message: '请输入用户名',
},
]}
validateTrigger={['onChange', 'onBlur']}
>
<Input />
</Form.Item>
<Form.Item
label="密码"
name="password"
rules={[
{
required: true,
message: '请输入密码',
},
]}
validateTrigger={['onChange', 'onBlur']}
>
<Input.Password />
</Form.Item>
<Form.Item {...tailLayout}>
<Button type="primary" htmlType="submit">
提交
</Button>
</Form.Item>
</Form>
);
};
export default Demo;
```
在上面的示例中,通过设置 `validateTrigger` 属性为 `['onChange', 'onBlur']`,在输入框的值发生变化或者失去焦点时进行验证。如果验证不通过,则会显示相应的错误提示信息。如果验证通过,则可以提交表单。需要注意的是,在提交表单前,还需要在 `Form` 组件中设置 `onFinish` 和 `onFinishFailed` 属性来处理表单提交成功和失败的情况。