Блог

Я хочу обернуть форму, как в этом примере:

Могу ли я сделать это без antd и как?

 import { Button, Card, Col, Form, Icon, Input, Row, message } from 'antd';
    
const SignupPage = () => {   
  return (
    <BubbleBgr>
      <Row type="flex" align="middle" justify="center">
        <Col {...formWidth }>
          <Card title="Sign up" className="signup-card">
            <WrappedForm />
          </Card>
        </Col>
      </Row>
    </BubbleBgr>
  );
};

const SignupForm = ({ form }) => {


  const signUp = e => {    
  return (
    <Form {...formLayout} onSubmit={signUp}>
      <Item label="Email">
        { getFieldDecorator('email')
        (
          <Input prefix={<Icon type="mail" />} autoFocus />
        ) }
      </Item>

      <Item label="Username">
        { getFieldDecorator('username') 
        (
          <Input prefix={<Icon type="user" />} />
        ) }
      </Item>

      <Item label="Password">
        { getFieldDecorator('password')
        (
          <Input type="password" prefix={<Icon type="lock" />} />
        ) }
      </Item>

      <Item label="Invitation code">
        { getFieldDecorator('invitation_code')
        (
          <Input prefix={<Icon type="key" />} />
        ) }
      </Item>

      <Button type="primary" htmlType="submit" block>Sign up</Button>
    </Form>
  );
};

const WrappedForm = Form.create({ name: 'signup_form '})(SignupForm);

const WrappedSignupPage = () => (
  <LoggedInContext.Consumer>
    {loggedIn => (
      !loggedIn ? <SignupPage /> : <Redirect to='/' />
    )}
  </LoggedInContext.Consumer>
);

export default WrappedSignupPage;