react使用antd-简单的文本框.密码框的使用

最新推荐文章于 2024-04-15 16:54:41 发布

原创最新推荐文章于 2024-04-15 16:54:41 发布 · 2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #js #vue #html #node.js

前端同时被 3 个专栏收录

14 篇文章

订阅专栏

js+css

6 篇文章

订阅专栏

react+antd

2 篇文章

订阅专栏

本文档展示了如何在React项目中使用antd库来创建一个基本的登录页面。首先通过npm安装antd，然后导入Input和Button组件，以及EyeInvisibleOutlined和EyeTwoTone图标，实现文本框和可切换显示密码的密码框功能。最后，页面在谷歌浏览器中展示登录和注册按钮。

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

react项目中使用antd

简单的文本框.密码框的使用

开发工具：vscode
1.antd官网：https://ant.design/docs/react/introduce-cn
安装antd npm install antd --save 或者 cnpm install antd –save
2.使用antd：按照页面使用模块的不同进行antd组件的使用
在这里插入图片描述

3.引入后就可以使用
在这里插入图片描述

4.页面在【谷歌浏览器】展示
在这里插入图片描述

在这里插入图片描述

import React,{Component} from "react";
import { Input, Button } from 'antd';
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons';
import 'antd/dist/antd.css';   //还需要引入css样式
class Login extends Component{
    render(){
        return (
            <div>
                <div style={{width:'100%',marginTop:'2%',marginBottom:'2%'}}>
                    <div style={{width:'33%',float:'left',visibility:'hidden'}}>/</div>
                    <div style={{width:'33%',float:'left'}}><Input placeholder="输入用户名/手机号" /></div>
                    <div style={{width:'33%',float:'left',visibility:'hidden'}}>/</div>
                    <div style={{clear:'both'}}></div>
                </div>
                <div style={{width:'100%',marginBottom:'2%'}}>
                    <div style={{width:'33%',float:'left',visibility:'hidden'}}>/</div>
                    <div style={{width:'33%',float:'left'}}><Input.Password placeholder="输入密码" iconRender={visible => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)} /></div>
                    <div style={{width:'33%',float:'left',visibility:'hidden'}}>/</div>
                    <div style={{clear:'both'}}></div>
                </div>
                <div style={{width:'100%',marginTop:'2%',marginBottom:'2%'}}>
                    <div style={{width:'50%',float:'left',textAlign:'right',paddingRight:'2%'}}><Button size="large">登录</Button></div>
                    <div style={{width:'50%',float:'left',textAlign:'left',paddingLeft:'2%'}}><Button size="large">注册</Button></div>   
                    <div style={{clear:'both'}}></div> 
                </div>
            </div>
        );

    }

}

export default Login;