如何使用reactjs中的antd库制作注册表格

Question

我是使用这个库的新手/我只想知道如何制作具有正确对齐的follow表单

Answer 1

此代码示例将帮助您

import { Button, Checkbox, Form, Input } from 'antd';
import React from 'react';
const App = () => {
const onFinish = (values) => {
console.log('Success:', values);
};
const onFinishFailed = (errorInfo) => {
console.log('Failed:', errorInfo);
};
return (
<Form
name="basic"
labelCol={{
span: 8,
}}
wrapperCol={{
span: 16,
}}
initialValues={{
remember: true,
}}
onFinish={onFinish}
onFinishFailed={onFinishFailed}
autoComplete="off"
>
<Form.Item
label="Username"
name="username"
rules={[
{
required: true,
message: 'Please input your username!',
},
]}
>
<Input />
</Form.Item>
<Form.Item
label="Password"
name="password"
rules={[
{
required: true,
message: 'Please input your password!',
},
]}
>
<Input.Password />
</Form.Item>
<Form.Item
name="remember"
valuePropName="checked"
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Checkbox>Remember me</Checkbox>
</Form.Item>
<Form.Item
wrapperCol={{
offset: 8,
span: 16,
}}
>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form.Item>
</Form>
);
};
export default App;

Answer 2

您可以根据需要使用网格组件来构建from
一个简单的方法是：

<Form>
<Row>
<Col span={12}>
<Form.Item label="First Name">
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Last Name">
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Phone Number">
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="Email Address">
<Input />
</Form.Item>
</Col>
<Col span={24}>
<Form.Item label="Address">
<Input />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label="City">                                                        
<Input />                        
</Form.Item>
</Col>
.
.
.


</Row> 
</Form>

确保阅读过多的文档：
https://ant.design/components/grid/
https://ant.design/components/form/