react如何實(shí)現(xiàn)篩選條件組件
更新時(shí)間：2023年10月23日 15:02:38 作者：拇指風(fēng)云
這篇文章主要介紹了react如何實(shí)現(xiàn)篩選條件組件問題,具有很好的參考價(jià)價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
react實(shí)現(xiàn)篩選條件組件
篩選條件組件點(diǎn)全部時(shí)選中全部，點(diǎn)其他時(shí)全部取消，點(diǎn)擊查詢時(shí)將某個(gè)類型下的選擇項(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": "渠道類型",
"values": [
{
"sid": "-1",
"sname": "全部"
},
{
"sid": "01",
"sname": "線下實(shí)體"
},
{
"sid": "02",
"sname": "線上電商"
},
{
"sid": "03",
"sname": "集客渠道"
},
{
"sid": "04",
"sname": "其他"
}
]
},
{
"screenTypeId": "2",
"screenTypeName": "合約類型",
"values": [
{
"sid": "-1",
"sname": "全部"
},
{
"sid": "01",
"sname": "線下實(shí)體2"
},
{
"sid": "02",
"sname": "線上電商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è)類型的數(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}>查詢</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": "渠道類型",
"values": [
{
"sid": "-1",
"sname": "全部"
},
{
"sid": "01",
"sname": "線下實(shí)體"
},
{
"sid": "02",
"sname": "線上電商"
},
{
"sid": "03",
"sname": "集客渠道"
},
{
"sid": "04",
"sname": "其他"
}
]
},*/
selectedItems: {"1": ["-1"]} //某一維度類型選中的數(shù)據(jù){key:value} key類型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] //某一類型下選中的數(shù)據(jù)的id的數(shù)組
if (sId === "-1" && selectedItemsId.indexOf(sId) === -1) {//當(dāng)點(diǎn)擊的是全部并且數(shù)組中沒有全部時(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;
}
}頁面效果：
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
jenkins分環(huán)境部署vue/react項(xiàng)目的方法步驟
這篇文章主要介紹了jenkins分環(huán)境部署vue/react項(xiàng)目的方法，本文分步驟給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-02-02
React 組件渲染和更新的實(shí)現(xiàn)代碼示例
這篇文章主要介紹了React-組件渲染和更新的實(shí)現(xiàn)代碼示例，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程實(shí)例分析
這篇文章主要介紹了React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程,結(jié)合具體實(shí)例形式分析了虛擬dom的基本原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05
React如何使用localStorage及實(shí)現(xiàn)刪除筆記操作過程
這篇文章主要介紹了React如何使用localStorage及實(shí)現(xiàn)刪除筆記操作過程,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-12-12
深入理解React19中任務(wù)調(diào)度器Scheduler的實(shí)現(xiàn)
本文主要介紹了深入理解React任務(wù)調(diào)度器Scheduler的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2026-03-03
本篇文章主要介紹了淺談react前后端同構(gòu)渲染，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
React事件監(jiān)聽和State狀態(tài)修改方式
這篇文章主要介紹了React事件監(jiān)聽和State狀態(tài)修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了React 條件渲染的相關(guān)資料，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
React Native中ScrollView組件輪播圖與ListView渲染列表組件用法實(shí)例分析
這篇文章主要介紹了React Native中ScrollView組件輪播圖與ListView渲染列表組件用法,結(jié)合實(shí)例形式詳細(xì)分析了ScrollView組件輪播圖與ListView渲染列表組件具體功能、使用方法與操作注意事項(xiàng),需要的朋友可以參考下2020-01-01
React錯(cuò)誤邊界Error Boundaries
錯(cuò)誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯(cuò)誤,并打印這些錯(cuò)誤,同時(shí)展示降級(jí)UI,而并不會(huì)渲染那些發(fā)生崩潰的子組件樹2023-01-01