初学React，制作案例页面1

原创已于 2022-10-25 14:54:08 修改 · 974 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#react.js

于 2022-10-20 19:34:54 首次发布

react知识点专栏收录该内容

6 篇文章

订阅专栏

本文介绍了初学者如何使用React和react-bootstrap构建一个包含登录功能的页面。首先，通过node和npm设置开发环境，创建react应用。接着，引入react-bootstrap库，创建Header和Login组件。在Header组件中，使用导航链接触发登录弹层，通过状态管理控制Modal的显示。在Login组件中，利用props从父组件接收显示状态，并通过回调函数将数据传递回父组件，实现关闭弹层的功能。

通过node搭建开发环境，先下载node并安装，然后在cmd中用npm命令下载react脚手架，

我选择了react-bootstrap作为UI框架，所以也在cmd中下载react-bootstrap资源包。

npm install -g create-react-app

npm install react-bootstrap bootstrap

然后创建项目，再进入运行项目

create-react-app myreact

cd myreact

npm start

会自动打开页面，网址：http://localhost:3000/ 这是开发环境网页，项目中有已生成的index页面文件，在index.js里引用bootstrap的css文件

我将App.js内容改造为三个板块

页面变成了这样

Header板块使用了react-bootstrap的导航标签

我想做个登录弹层出来，弹层想做成组件，就在Header.js里引入登录组件

import Login from './login';

<Login />

Login文件里的代码

页面样式这样

导航上的登录按钮加上onClick事件， login文件里用bootstrap标签Modal来实现，Modal标签通过show属性来展示或隐藏，值是false或true，导航上的登录按钮的onClick就需要控制show的值，但是登录弹层是另一个组件，所以要用到父组件传值给子组件的功能。

在Header.js里初始化变量，设置show为false，先不显示弹层

constructor(props){//初始化
    super(props);
    this.state={
        show:false,//显示弹层
        type:0//登录或不登录
    }
}

登录事件里加js语句，让show变成true值

<Nav.Link eventKey={2} onClick={()=>this.setState({show:true})}>登录</Nav.Link>

Login标签传递值<Login name={this.state.show}/>

再在login.js里接收值

<Modal show={this.props.name} onHide={handleClose}>

点击弹层右上角X时想要关闭弹层，需要将show的值改变并传递给父组件。

通过学习，可以在父组件Header里再传递一个属性onRef给Login标签，传递值是个函数，

<Login name={this.state.show} onRef={this.getChildrenData}></Login>

这个函数里进行接收子组件传递过来的数据，并替换state里的值

getChildrenData=(data)=>{
console.log(data);
this.setState({show:data.name,type:data.type});
}

等子组件 Login需要调用时把改变的数值通过onRef这个函数传递回父组件，就能关闭弹层。

this.props.onRef(this.state);

我想获取弹层里输入的用户名，密码等需要用React.createRef()方法，form标签也要加上ref属性。