react第六天简单的react实例

最新推荐文章于 2022-08-09 09:57:47 发布

qq_40262972

最新推荐文章于 2022-08-09 09:57:47 发布

阅读量167

点赞数

分类专栏： react 文章标签： react 实例初学受控组件

本文链接：https://blog.csdn.net/qq_40262972/article/details/95453055

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

react初学day06我只是写个小实例我只是写个小实例运行后结果①未登录②登陆成功1.准备工作<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="../js/react.min.js"></s...

摘要由CSDN通过智能技术生成

react初学day06

我只是写个小实例

我只是写个小实例

运行后结果
①未登录
未登录截图
②登陆成功
登陆成功截图
1.准备工作

<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="../js/react.min.js"></script>
<script src="../js/react-dom.min.js"></script>
<script src="../js/browser.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
// bootstrap的css样式   
// react15.x版本的文件 
// react-dom渲染react结构的文件 
// browser让浏览器识别jsx文件的js文件  
// jquery文件

2.添加我饿们的挂载点

<div id="app"></div>

3.先把结构搞定
①Login父组件

const Login = React.createClass({
   render(){
        return (  //这里就变成了 className
            <div className="container">
                <div className="panel panel-primary">
                    <Header/>   {/*子组件*/}
                    <Body/>		{/*子组件*/}
                </div>
            </div>
        )
    }
});

②Header组件

const Header = React.createClass({
    render(){
        return (
            <div className="panel-heading">
                <p>欢迎 二狗 进来！<button className="btn btn-success">注销</button></p>
            </div>
        )
    }
});

③Body组件

const Body = React.createClass({
    render(){
        return (
            <div className="panel-body">
                <Content/>
                <LoginForm/>
            </div>
        )
    }
});

④Content组件

const Content = React.createClass({
    render(){
        return (
            <div>
                <p>content....+++++ </p>
            </div>
        )
    }
});

⑤LoginForm组件

const LoginForm = React.createClass({
    render(){
        return (
            <form action="#">
                <div className="form-group">
                    <label>用户：</label>
                    <input type="text" className="form-control"/>
                </div>
                <div className="form-group">
                    <label>密码：</label>
                    <input type="password"className="form-control"/>
                </div>
                <div className="form-group">
                    <input type="submit"defaultValue="登录"/>  {/*value要写为defaultValue*/}
                </div>
            </form>
        )
    }
});

运行截图
结构截图
下一步，我们根据有无登录信息，控制组件的显示与隐藏
4.组件的显示与隐藏（多种写法在之前已经写过）
①在父组件初始化userInfo这个状态

getInitialState(){
   return {
        userInfo: null
    }
}

②将父组件的状态传递给需要这个状态参数的组件

<Header userInfo={this.state.userInfo}/>
<Body userInfo={this.state.userInfo}/>

③通过this.props接收

const Header = React.createClass({
   render(){
        return (
            <div className="panel-heading">
                {
                    !this.props.userInfo? "登录": <p>欢迎 二狗 进来！<button className="btn btn-success">注销</button></p>
                }
            </div>
        )
    }
});
const Body = React.createClass({
    render(){
        return (
            <div className="panel-body">
                {
                    this.props.userInfo? <Content/>:<LoginForm/>
                }
            </div>
        )
    }
});

现在运行结果
运行截图
5.点击登录的时候，把信息userInfo的信息改变
只有自己才能改变自己的状态，所以将方法封装在父组件中

changeUserInfo(userInfo){
	this.setState({
		userInfo    //简写  userInfo:userInfo
	})
}

6.将方法传递给子组件

//不止只一个地方需要传递，只是举个例子
<Body userInfo={this.state.userInfo} changeUserInfo={this.changeUserInfo}/>
//需要传参的地方这样写
{this.props.changeUserInfo.bind(this,null)}

7.点击登录的时候将用户名密码存入userInfo
①受控组件的写法

1.受控组件受到数据的控制
2.当输入框的内容发生改变的时候，使其更改组件自身的状态。在别的如果要用数据的话，直接从组件的状态里面获取即可。
3.发现状态由组件进行维护的 react官方推荐的写法数据驱动提倡一些数据最好与组件的状态进行关联

const LoginForm = React.createClass({
    getInitialState(){  //在自身定义状态
        return {
            username: "",
            password: ""
        }
    },
    submits(e){
        this.props.changeUserInfo(this.state)
        e.preventDefault();   //阻止按钮submit默认时间，防止页面跳转
    },
    handleChange(type,e){   //第一个是传进来的参数，事件对象沦为第二个
        if(type === "username"){
            this.setState({
                username: e.target.value
            })
        }else{
            this.setState({
                password: e.target.value
            })
        }
        console.log(e.target.value);
    },
    render(){
        return (
            <form action="#" onSubmit={this.submits}>
                <div className="form-group">
                    <label>用户：</label>
                    <input type="text" onChange={this.handleChange.bind(this,"username")} className="form-control"/>
                </div>
                <div className="form-group">
                    <label>密码：</label>
                    <input type="password" onChange={this.handleChange.bind(this,"password")} className="form-control"/>
                </div>
                <div className="form-group">
                    <input type="submit" className="btn btn-default" defaultValue="登录"/>
                </div>
            </form>
        )
    }
});

②非受控组件

1.非受控组件不会受到数据的控制（都是相对于表单元素）
2.输入框的内容发生改变了，直接通过ref进行标记，然后直接获取内容即可
3.由DOM自身维护管理

//没有定义状态来存储username和password
//点击登录的时候，直接将对象赋值给父组件的状态
const LoginForm = React.createClass({
    submits(e){ 
        let username = this.username.value;
        let password = this.password.value;
        if(username === "123" && password === "123"){
            this.props.changeUserInfo({
                username,password
            })
        }else{
            alert("失败")
        }
        e.preventDefault();
    },
    render(){
        return (
            <form action="#" onSubmit={this.submits}>
                <div className="form-group">
                    <label>用户：</label>
                    <input type="text" ref={el=>{this.username=el}} className="form-control"/>
                </div>
                <div className="form-group">
                    <label>密码：</label>
                    <input type="password" ref={el=>{this.password=el}} className="form-control"/>
                </div>
                <div className="form-group">
                    <input type="submit" className="btn btn-default" defaultValue="登录"/>
                </div>
            </form>
        )
    }
});

8.点击注销，将父组件的userInfo状态设置为空

<button 
	className="btn btn-success" 
	onClick={this.props.changeUserInfo.bind(this,null)}
>注销</button>

完事,代码
链接：https://pan.baidu.com/s/1A9DZaAWA7c1hZfu5_5lPhw
提取码：ovrl

qq_40262972

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
react第六天简单的react实例

react初学day06我只是写个小实例我只是写个小实例运行后结果①未登录②登陆成功1.准备工作<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"><script src="../js/react.min.js"></s...
复制链接

扫一扫