react如何实现筛选条件组件
更新时间：2023年10月23日 15:02:38 作者：拇指风云
这篇文章主要介绍了react如何实现筛选条件组件问题,具有很好的参考价价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
react实现筛选条件组件
筛选条件组件点全部时选中全部，点其他时全部取消，点击查询时将某个类型下的选择项传出
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": "线下实体"
},
{
"sid": "02",
"sname": "线上电商"
},
{
"sid": "03",
"sname": "集客渠道"
},
{
"sid": "04",
"sname": "其他"
}
]
},
{
"screenTypeId": "2",
"screenTypeName": "合约类型",
"values": [
{
"sid": "-1",
"sname": "全部"
},
{
"sid": "01",
"sname": "线下实体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)){//如果数组中存在这个类型的数据，现将其删除掉，然后在push入新的数据
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": "线下实体"
},
{
"sid": "02",
"sname": "线上电商"
},
{
"sid": "03",
"sname": "集客渠道"
},
{
"sid": "04",
"sname": "其他"
}
]
},*/
selectedItems: {"1": ["-1"]} //某一维度类型选中的数据{key:value} key类型id，value选中数据的id的数组
}
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] //某一类型下选中的数据的id的数组
if (sId === "-1" && selectedItemsId.indexOf(sId) === -1) {//当点击的是全部并且数组中没有全部时，则删掉选中的所有数据，并将全部这一项的id放入数组中
for (var i = selectedItemsId.length-1; i >=0; i--) {
selectedItemsId.splice(i, 1);
}
selectedItemsId.push(sId);
}
else if (selectedItemsId.indexOf(sId) === -1) {//如果点击的不是全部，是其他选项时，若数组中有全部这一项，先删除全部这一项，然后将选中的项放入数组中
for (var i = 0; i < selectedItemsId.length; i++) {
if (selectedItemsId[i] === "-1") {
selectedItemsId.splice(i, 1);
}
}
selectedItemsId.push(sId);
}
else { //如果点击的是全部或者别的选项，并且点击的这一项已经存在于数组中，则应该删除掉这一项
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;
}
}页面效果：
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了React Native 启动流程简析,文以 react-native-cli 创建的示例工程（安卓部分）为例，给大家分析 React Native 的启动流程，需要的朋友可以参考下2021-08-08
React 是一个用于构建用户界面的 JavaScript 库，主要用于构建 UI，而不是一个 MVC 框架，React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它2017-05-05
在React中,解析HTML标签通常是使用JSX（JavaScript XML）语法的一部分,这篇文章主要介绍了React 用来解析html 标签的方法,本文通过示例代码给大家介绍的非常详细,需要的朋友可以参考下2023-08-08
axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中，本文给大家分享React中axios模块的使用方法，感兴趣的朋友一起看看吧2022-03-03
这篇文章主要介绍了React-hooks中的useEffect,对于React组件来说，主作用是根据数据(state/props)渲染UI，除此之外都是副作用（比如手动修改DOM、发送ajax请求），本文通过实例代码给大家介绍的非常详细，需要的朋友参考下吧2022-05-05
connect()是react-redux中的核心方法之一，它将react组件预redux中的Store真正连接在一起，这篇文章主要介绍了react-redux的connect详解,需要的朋友可以参考下2023-01-01
这篇文章主要介绍了React如何解决样式污染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
Zustand 是一个非常轻量、简洁的状态管理库,旨在为 React 提供简便且高效的状态管理,相比于 Redux 或 Context API,Zustand 具有更简洁、灵活和易于理解的优点,感兴趣的朋友一起看看吧2024-12-12
详解React如何使用useReducer高阶钩子来管理状态
useReducer是React中的一个钩子,用于替代 useState来管理复杂的状态逻辑,本文将详细介绍如何在React中使用 useReducer高阶钩子来管理状态,感兴趣的可以了解下2025-02-02
这篇文章主要为大家介绍了前端框架react-spring基础用法示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
最新评论