dva開發一個cnode網站（4）

增加分類標籤，效果如下：

1 修改ListData組件

完整代碼：

import React , { Component }from 'react';
import { List, Avatar, Icon, Spin ,Tag } from 'antd';
import PropTypes from 'prop-types';
import { connect } from 'dva';
import './my.css';
import {Link} from 'dva/router';

class ListData extends Component{

  changeType(tab) {
    const { dispatch,pageSize} = this.props
    dispatch({ type: 'listdata/query', payload: { page:1,pageSize,type:tab} })
  }

 render() {
    const IconText = ({ type, text }) => (
   <span>
    <Icon type={type} style={{ marginRight: 8 }} />
    {text}
  </span>
);

   const MyTag= {share:'分享',ask: '問答', job: '招聘',good: '精化', dev: '客戶端測試'};
   const Colors= {share:'#87d068',ask: '#2db7f5', job: 'purple',good: 'orange', dev: 'lime'};

  return (
    <Spin spinning={this.props.loading.global}
    size='large'
    tip="數據正在加載中">
    <div>
     <Tag onClick={this.changeType.bind(this,'all')} color={this.props.type==='all' ? "#87d068" : "#2db7f5"}>全部</Tag>
     <Tag onClick={this.changeType.bind(this,'good')} color={this.props.type==='good' ? "#87d068" : "#2db7f5"}>精華</Tag>
     <Tag onClick={this.changeType.bind(this,'share')} color={this.props.type==='share' ? "#87d068" : "#2db7f5"}>分享</Tag>
     <Tag onClick={this.changeType.bind(this,'ask')} color={this.props.type==='ask' ? "#87d068" : "#2db7f5"}>問答</Tag>
     <Tag onClick={this.changeType.bind(this,'job')} color={this.props.type==='job' ? "#87d068" : "#2db7f5"}>招聘</Tag>
     <Tag onClick={this.changeType.bind(this,'dev')} color={this.props.type==='dev' ? "#87d068" : "#2db7f5"}>客戶端測試</Tag>
   </div>
  <List
    itemLayout="vertical"
    size="large"
    pagination={{
      onChange: (page) => {
        console.log(page);
        this.props.dispatch({ type: 'listdata/query', payload: { page:page,pageSize:this.props.pageSize,type:this.props.type} })
      },
      pageSize: this.props.pageSize,
      total:500,
      current:this.props.page
    }}
    dataSource={this.props.pageData}
    renderItem={item => (
      <List.Item
        key={item.title}
        actions={[<IconText type="star-o" text={item.visit_count} />, <IconText type="like-o" text={item.visit_count} />, <IconText type="message" text={item.reply_count} />]}
      >
        <List.Item.Meta
          avatar={<Avatar src={item.author.avatar_url} />}
          title={<a>{item.author.loginname}</a>}
          description={item.create_at}
        />

        {item.top ? <Tag color='#f50'>置頂</Tag> : <Tag color={Colors[item.tab]}>{MyTag[item.tab]}</Tag>}
         <Link to={'/detail/'+item.id}>{item.title}</Link>
      </List.Item>
    )}

  />
    </Spin>
  );
    }

     componentWillMount () {
          const { dispatch, type, pageSize,page} = this.props
          dispatch({ type: 'listdata/query', payload: { page,pageSize,type} })
    }
};

ListData.propTypes = {
    type: PropTypes.string.isRequired,
    pageSize: PropTypes.number.isRequired,
};

function mapStateToProps(state) {
  const {pageSize,type,page,pageData} = state.listdata;
  return {
      pageSize,
      type,
        page,
        pageData,
        loading:state.loading
  };
}

// export default ListData;
export default connect(mapStateToProps)(ListData);

2 在列表頭部增加tag組件

    <div>
     <Tag onClick={this.changeType.bind(this,'all')} color={this.props.type==='all' ? "#87d068" : "#2db7f5"}>全部</Tag>
     <Tag onClick={this.changeType.bind(this,'good')} color={this.props.type==='good' ? "#87d068" : "#2db7f5"}>精華</Tag>
     <Tag onClick={this.changeType.bind(this,'share')} color={this.props.type==='share' ? "#87d068" : "#2db7f5"}>分享</Tag>
     <Tag onClick={this.changeType.bind(this,'ask')} color={this.props.type==='ask' ? "#87d068" : "#2db7f5"}>問答</Tag>
     <Tag onClick={this.changeType.bind(this,'job')} color={this.props.type==='job' ? "#87d068" : "#2db7f5"}>招聘</Tag>
     <Tag onClick={this.changeType.bind(this,'dev')} color={this.props.type==='dev' ? "#87d068" : "#2db7f5"}>客戶端測試</Tag>
   </div>

一共6種類型

3 爲每一種類型添加鼠標點擊事件

  changeType(tab) {
    const { dispatch,pageSize} = this.props
    dispatch({ type: 'listdata/query', payload: { page:1,pageSize,type:tab} })
  }

點擊後重新獲取新的數據，請求參數，頁碼爲1默認獲取第一頁數據

4 給列表的每一條數據也添加tag

   const MyTag= {share:'分享',ask: '問答', job: '招聘',good: '精化', dev: '客戶端測試'};
   const Colors= {share:'#87d068',ask: '#2db7f5', job: 'purple',good: 'orange', dev: 'lime'};
{item.top ? <Tag color='#f50'>置頂</Tag> : <Tag color={Colors[item.tab]}>{MyTag[item.tab]}</Tag>}

主要是根據item.tab的來變換顏色以及顯示文字

最後效果

這節課內容比較簡單，基本上整個網站的主體就完成了，下節課再把剩下幾個頁面一搞。
歡迎關注我的公衆號mike啥都想搞，學習更多內容。