快捷導(dǎo)航

react如何實(shí)現(xiàn)篩選條件組件

更新時(shí)間：2023年10月23日 15:02:38 作者：拇指風(fēng)云

這篇文章主要介紹了react如何實(shí)現(xiàn)篩選條件組件問(wèn)題,具有很好的參考價(jià)價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

react實(shí)現(xiàn)篩選條件組件

篩選條件組件點(diǎn)全部時(shí)選中全部，點(diǎn)其他時(shí)全部取消，點(diǎn)擊查詢(xún)時(shí)將某個(gè)類(lèi)型下的選擇項(xiàng)傳出

screenCondition.js文件

/**
 *
 * title: screenCondition.js
 *
 * author: WangPei.
 *
 * date: 2017/5/18.
 *
 */
import React,{Component} from "react"
import ScreenConditionItem from "../../component/screenConditionItem/screenConditionItem"
export default class ScreenCondition extends Component{
    constructor(props){
        super(props);
        this.state={
            screenConditionData:[
                {
                    "screenTypeId": "1",
                    "screenTypeName": "渠道類(lèi)型",
                    "values": [
                        {
                            "sid": "-1",
                            "sname": "全部"
                        },
                        {
                            "sid": "01",
                            "sname": "線(xiàn)下實(shí)體"
                        },
                        {
                            "sid": "02",
                            "sname": "線(xiàn)上電商"
                        },
                        {
                            "sid": "03",
                            "sname": "集客渠道"
                        },
                        {
                            "sid": "04",
                            "sname": "其他"
                        }
                    ]
                },
                {
                    "screenTypeId": "2",
                    "screenTypeName": "合約類(lèi)型",
                    "values": [
                        {
                            "sid": "-1",
                            "sname": "全部"
                        },
                        {
                            "sid": "01",
                            "sname": "線(xiàn)下實(shí)體2"
                        },
                        {
                            "sid": "02",
                            "sname": "線(xiàn)上電商2"
                        },
                        {
                            "sid": "03",
                            "sname": "集客渠道2"
                        },
                        {
                            "sid": "04",
                            "sname": "其他2"
                        }
                    ]
                }
            ],
            selectedData:[]
 
        }
    }
    screenConditionItemReturn(typeId,returnData){
        debugger
        var selectedData=this.state.selectedData;
        for(var i=0;i<selectedData.length;i++){
            if(selectedData[i].hasOwnProperty(typeId)){//如果數(shù)組中存在這個(gè)類(lèi)型的數(shù)據(jù)，現(xiàn)將其刪除掉，然后在push入新的數(shù)據(jù)
                selectedData.splice(i,1);
            }
        }
        selectedData.push(returnData);
        this.setState({selectedData:selectedData});
    }
    render(){
        var queryBtnStyle=null;
        switch (window.screen.width){
            case 1366:
                queryBtnStyle={
                    width:"80px",
                    height:"35px",
                    border:"1px solid #C3B295",
                    cursor:"pointer",
                    borderRadius:"10px",
                    textAlign:"center",
                    lineHeight:"35px",
                    backgroundColor:"#D1C7B0",
                    fontSize:"18px",
                    color:"#ffffff",
                    top: "-37px",
                    left: "1030px",
                    position: "relative"
                }
                break;
            case 1920:
                queryBtnStyle={
                    width:"80px",
                    height:"35px",
                    border:"1px solid #C3B295",
                    cursor:"pointer",
                    borderRadius:"10px",
                    textAlign:"center",
                    lineHeight:"35px",
                    backgroundColor:"#D1C7B0",
                    fontSize:"18px",
                    color:"#ffffff",
                    top: "-37px",
                    left: "1030px",
                    position: "relative"
                }
                break;
        }
        var screenConditionData=this.state.screenConditionData;
        if(screenConditionData.length>0){
            var screenType=screenConditionData.map((data,index)=>{
                return (<ScreenConditionItem key={index} data={data} callbackParent={this.screenConditionItemReturn.bind(this)}/>);
            })
        }
        return(
            <div>
                {screenType}
                <div style={queryBtnStyle}>查詢(xún)</div>
            </div>
        );
    }
}

screenConditionItem.js文件

/**
 *
 * title: screenConditionItem.js
 *
 * author: WangPei.
 *
 * date: 2017/5/18.
 *
 */
import React, {Component} from "react"
import "./screenConditionItem.less"
export default class ScreenConditionItem extends Component {
    constructor(props) {
        super(props);
        this.state = {
            /*itemData: {
                "screenTypeId": "1",
                "screenTypeName": "渠道類(lèi)型",
                "values": [
                    {
                        "sid": "-1",
                        "sname": "全部"
                    },
                    {
                        "sid": "01",
                        "sname": "線(xiàn)下實(shí)體"
                    },
                    {
                        "sid": "02",
                        "sname": "線(xiàn)上電商"
                    },
                    {
                        "sid": "03",
                        "sname": "集客渠道"
                    },
                    {
                        "sid": "04",
                        "sname": "其他"
                    }
                ]
            },*/
            selectedItems: {"1": ["-1"]}  //某一維度類(lèi)型選中的數(shù)據(jù){key:value} key類(lèi)型id，value選中數(shù)據(jù)的id的數(shù)組
 
        }
        this.onClickScreenItem = this.onClickScreenItem.bind(this);
    }
    componentWillMount(){
        if(this.props.data!==null){
            var typeId=this.props.data.screenTypeId;
            var newSelectedItems={};
            newSelectedItems[typeId]=["-1"]
            this.setState({selectedItems:newSelectedItems});
        }
    }
    onClickScreenItem(event) {
        debugger;
        var clickItem = event.currentTarget;
        var typeId = clickItem.parentNode.id;
        var sId = clickItem.id;
        var selectedItems = this.state.selectedItems;
        var newSelectedItems = {...selectedItems};
        var selectedItemsId = newSelectedItems[typeId] //某一類(lèi)型下選中的數(shù)據(jù)的id的數(shù)組
        if (sId === "-1" && selectedItemsId.indexOf(sId) === -1) {//當(dāng)點(diǎn)擊的是全部并且數(shù)組中沒(méi)有全部時(shí)，則刪掉選中的所有數(shù)據(jù)，并將全部這一項(xiàng)的id放入數(shù)組中
            for (var i = selectedItemsId.length-1; i >=0; i--) {
                selectedItemsId.splice(i, 1);
            }
            selectedItemsId.push(sId);
        }
        else if (selectedItemsId.indexOf(sId) === -1) {//如果點(diǎn)擊的不是全部，是其他選項(xiàng)時(shí)，若數(shù)組中有全部這一項(xiàng)，先刪除全部這一項(xiàng)，然后將選中的項(xiàng)放入數(shù)組中
            for (var i = 0; i < selectedItemsId.length; i++) {
                if (selectedItemsId[i] === "-1") {
                    selectedItemsId.splice(i, 1);
                }
            }
            selectedItemsId.push(sId);
        }
        else { //如果點(diǎn)擊的是全部或者別的選項(xiàng)，并且點(diǎn)擊的這一項(xiàng)已經(jīng)存在于數(shù)組中，則應(yīng)該刪除掉這一項(xiàng)
            selectedItemsId.splice(selectedItemsId.indexOf(sId), 1);
        }
        this.props.callbackParent(typeId,newSelectedItems);
        this.setState({selectedItems: newSelectedItems});
 
    }
 
    setScreenItemStyle(sid, typeId) {
        var selectedItems = this.state.selectedItems;
        if (selectedItems[typeId].indexOf(sid) !== -1) {
            return "specialReport-screenConditionItem-sName-div-change";
        } else {
            return "specialReport-screenConditionItem-sName-div";
        }
    }
 
    render() {
        var itemData = this.props.data;
        if (itemData !== null && itemData.values.length > 0) {
            var td = itemData.values.map((data, index) => {
                return (
                    <td id={itemData.screenTypeId} key={index} className="specialReport-screenConditionItem-sName">
                        <div className={this.setScreenItemStyle(data.sid, itemData.screenTypeId)}
                             onClick={this.onClickScreenItem}
                             id={data.sid}>{data.sname}</div>
                    </td>
                );
            });
        }
        return (
            <table className="specialReport-screenConditionItem-table">
                <tbody>
                <tr>
                    <td className="specialReport-screenConditionItem-typeName">{itemData.screenTypeName}:</td>
                    {td}
                </tr>
                </tbody>
            </table>
        );
    }
}

screenConditionItem.less文件

@sNameDivHeight:25px;
@sNameDivLineHeight:25px;
@fontFamily:"Microsoft Yahei";
@media only screen and (min-width: 961px) and (max-width: 1366px){
  @sNameDivWidth:80px;
  .specialReport-screenConditionItem-typeName{
    width: 100px;
    height: 40px;
  }
  .specialReport-screenConditionItem-sName{
    width: 100px;
    height: auto;
  }
  .specialReport-screenConditionItem-sName-div{
    text-align: center;
    width: @sNameDivWidth;
    height: @sNameDivHeight;
    line-height: @sNameDivLineHeight;
    color:#cfcfcf;
    cursor: pointer;
  }
  .specialReport-screenConditionItem-sName-div-change{
    text-align: center;
    width: @sNameDivWidth;
    height: @sNameDivHeight;
    line-height: @sNameDivLineHeight;
    color:#ffffff;
    background-color: #D1C7B0;
    border-radius: 10px;
    cursor: pointer;
  }
}
@media only screen and (min-width: 1367px) and (max-width: 1920px){
  @sNameDivWidth:100px;
  .specialReport-screenConditionItem-table{
    font-family: @fontFamily;
    font-size: 20px;
  }
  .specialReport-screenConditionItem-typeName{
    width: 150px;
    height: 40px;
  }
  .specialReport-screenConditionItem-sName{
    width: 150px;
    height: auto;
  }
  .specialReport-screenConditionItem-sName-div{
    text-align: center;
    width: @sNameDivWidth;
    height: @sNameDivHeight;
    line-height: @sNameDivLineHeight;
    color:#cfcfcf;
    cursor: pointer;
  }
  .specialReport-screenConditionItem-sName-div-change{
    text-align: center;
    width: @sNameDivWidth;
    height: @sNameDivHeight;
    line-height: @sNameDivLineHeight;
    color:#ffffff;
    background-color: #D1C7B0;
    border-radius: 10px;
    cursor: pointer;
  }
}

頁(yè)面效果：