react4阶段学习笔记

最新推荐文章于 2024-04-10 22:17:16 发布

乌鸦嘎嘎

最新推荐文章于 2024-04-10 22:17:16 发布

阅读量1.3k

点赞数

分类专栏： reactjs

本文链接：https://blog.csdn.net/yishu422/article/details/72619660

版权

reactjs 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

练习组件

头部组件实例(其中也可再次拆分几个组件)：

import React from 'react';
import {
Row,
Col
} from 'antd';
import {
Menu,
Icon,
Tabs,
message,
Form,
Input,
Button,
CheckBox,
Modal
} from 'antd';
const FormItem = Form.Item;
const SubMenu = Menu.SubMenu;
const TabPane = Tabs.TabPane;
const MenuItemGroup = Menu.ItemGroup;
import {Router, Route, Link, browserHistory} from 'react-router';

class PCHeader extends React.Component {

constructor() {
    //初始化参数
    super();
    this.state = {
      current: 'yule',//选中的节点
      modalVisible: false,//模态框modal默认隐藏
      action: 'login',//登陆还是注册
      hasLogined: false,//是否已经登陆
      userNickName: '',//昵称
      userid: 0
    };
};

componentWillMount(){
    if(localStorage.userid!=''){
      this.setState({hasLogined:true});
      this.setState({userNickName:localStorage.NikeUserName,userid:localStorage.userid});
    }
};

//模态框是否显示的方法
setModalVisible(value){
    this.setState({
      modalVisible: value
    });
};

//点击相关动作的方法
handleClick(e){
    if(e.key=="register"){
      this.setState({current: 'register'});//改变高亮
      this.setModalVisible(true);//显示模态框
    }else{
      {
        this.setState({current: e.key});
      }
    }
};

handleSubmint(e){
    e.preventDefault();
    var myFetchOption = {method:'Get'};//配置提交的方法
    var formData = this.props.form.getFieldValue();//取表单中的值
// 使用fetch，将项目与后端工程连接。
    fetch("http://newsapi.gugujiankong.com/Handler.ashx?action=" + this.state.action
    + "&username="+formData.userName+"&password="+formData.password
    +"&r_userName=" + formData.r_userName + "&r_password="
    + formData.r_password + "&r_confirmPassword="
    + formData.r_confirmPassword, myFetchOptions)
    then(response=>response.json()).then(json=>{//将响应的返回数据做json处理
      this.setState({userNickName:json.NikeUserName,userid:json.UserId});
      localStorage.userid = json.UserId;
      localStorage.userNickName = json.NikeUserName;
    });
    if(this.state.action=='login'){
      this.setState({hasLogined:true});
    }
    message.success(" 请求成功！！");//提示信息
    this.setModalVisible(false);//隐藏模态框
};

callback(key){
    if(key==1){
      this.setState({action:'login'});
    }else if(key==2){
      this.setState({action:'register'});
    }
};
logout(){
    localStorage.userid = "";
    localStorage.userNickName = "";
    this.setState({hasLogined:false});
};
render() {
    let {getFieldProps} =this.props.form;//接收页面参数，双向数据流绑定

    //使用三元表达式，根据用户是否登陆来展示不同组件
    const userShow = this.state.hasLogined
    ? <Menu.Item key="logout" class="register">//
        <Button type="primary" htmlType="button">{this.state.userNickName}</Button>
        //type样式   htmltype功能（提交、重置、普通按钮）
        //{this.state.userNickName}用户名
          
        <Link target="_blank">//target="_blank新页面打开
          <Button type="dashed" htmlType="button">个人中心</Button>
        </Link>
          
        <Button type="ghost" htmlType="button" onClick={this.logout.bind(this)}>退出</Button>
      </Menu.Item>
    : <Menu.Item key="register" class="register">
        <Icon type="right"/>注册/登录
      </Menu.Item>;
      //这里要有分号隔开
    return (
      <header>
        <Row>
          <Col span = {2}> </Col>
          <Col span = {4} >
            <a href = "/" class = "logo" >
            <img src="./src/images/logo.png" alt = "logo" />
            <span> ReactNews </span>
            </a>
          </Col>
          <Col span = {16} >
          //this.handleClick.bind(this)绑定点击的地方
            < Menu mode = "horizontal" onClick={this.handleClick.bind(this)} selectedKeys = { [this.state.current] } >
            < Menu.Item key = "toutiao" > < Icon type = "appstore" / > 头条 < /Menu.Item>
            < Menu.Item key = "guonei" > < Icon type = "check" / > 国内 < /Menu.Item>
            < Menu.Item key = "guowai" > < Icon type = "check" / > 国外 < /Menu.Item>
            < Menu.Item key = "shehui" > < Icon type = "check" / > 社会 < /Menu.Item>
            < Menu.Item key = "junshi" > < Icon type = "check" / > 军事 < /Menu.Item>
            < Menu.Item key = "yule" > < Icon type = "download" / > 娱乐 < /Menu.Item>
            {userShow}//设置定义的三元表达式
            </Menu>

              //wrapClassName="vertical-center-model"弹出页面垂直居中
              //visible={this.state.modalVisible} 显示还是隐藏
              //()=>箭头函数
            <Modal title="用户中心" wrapClassName="vertical-center-model" visible={this.state.modalVisible}
             onCancel = {()=>this.setModalVisible(false)} onOk = {()=>this.setModalVisible(false)} okText="关闭" >
              <Tabs type="card" onChange={this.callback.bind(this)}>//type 样式

              <TabPane tab="登陆" key="1">
                <Form horizontal onSubmit={this.handleSubmint.bind(this)}>
                  <FormItem label="账户">
                    <Input placeholder="请输入您的账号" {...getFieldProps('userName')} />
                    // {...getFieldProps('r_userName')} 参数名称，理解为与后台传输时的名称，例：name=username
                  </FormItem>
                  <FormItem label="密码">
                    <Input type="password" placeholder="请输入您的密码" {...getFieldProps('password')} />
                  </FormItem>
                  <Button type="primary" htmlType="submit">登陆</Button>
                </Form>
              </TabPane>

              //Tabs 与TabPane类似于 ul与li
                <TabPane tab="注册" key="2">
                  <Form horizontal onSubmit={this.handleSubmint.bind(this)}>
                    <FormItem label="账户">
                      <Input placeholder="请输入您的账号" {...getFieldProps('r_userName')} />
                      // {...getFieldProps('r_userName')} 参数名称，理解为与后台传输时的名称，例：name=username
                    </FormItem>
                    <FormItem label="密码">
                      <Input type="password" placeholder="请输入您的密码" {...getFieldProps('r_password')} />
                    </FormItem>
                    <FormItem label="确认密码">
                      <Input type="password" placeholder="请再次确认您的密码" {...getFieldProps('r_password ')} />
                    </FormItem>
                    <Button type="primary" htmlType="submit">注册</Button>
                  </Form>
                </TabPane>
              </Tabs>
            </Modal>

          </Col>
          <Col span = {2}> </Col>
        </Row>
      </header>
    );
};
}

//由于添加了模态框还有其他一些属性，并不是简单的页面组件，
//所以需要重新构造一下在提供给外面用 -----------------二次封装
export default PCHeader = Form.create({})(PCHeader);

-----------------------------------------------------

通过css操作实现超过长度变成点点点：
   whiteSpace:"nowrap",
    overflow:"hidden",
    textOverflow:"ellipsis"

-----------------------------------------------------

react-route
react里面页面跳转，并不是真正意义上的跳转，
只是hash值的改变，展示不同的模块
主要注意：
一旦设置了触发点，就一定要写方法，
避免没有写方法，程序无法成立

-----------------------------------------------------

页头步骤：
1.标志;
2.栏目;
3.在构造函数中初始化默认值，这其中包括默认登陆状态等，
   根据登陆与否设置为一个组件，并将其放置与栏目中，
4.设置注册/登陆/个人中心等弹出框组件，
   在这个组件中判断登陆与否，然后显示相应的标签(推荐三元表达式)，
5.设置栏目点击事件，当点击到相应栏目时，相应栏目高亮，
   或者触发弹出框，
       注：高亮与弹出框都可在构造函数中设置
           在设置方法时，主语ES6中的箭头函数“()=>”

-----------------------------------------------------

Warning: `Form[inline|horizontal|vertical]` is deprecated, please use `Form[layout]` instead.

表示 <Form horizontal layout={formLayout}></Form> 过时，

建议用 <Form layout="horizontal" layout={formLayout}></Form>

-----------------------------------------------------

const {news} = this.state;定义全局函数的时候，要注意{}

const newsList = news.length？xxx ：xxx 这个是三元表达式

-----------------------------------------------------

createMarkup(){
    return {__html: this.state.newsItem.pagecontent};
};
<div dangerouslySetInnerHTML={this.createMarkup()}></div>
固定写法，将内容展示在页面中
createMarkup：这个方法保存的是对象，这个对象中有需要的内容。

-----------------------------------------------------