React条件筛选

最新推荐文章于 2024-06-11 09:40:25 发布
最新推荐文章于 2024-06-11 09:40:25 发布
阅读量1.3k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SherryStar/article/details/101380397
版权

初学demo 请大家多多指教！

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
    <script src="https://cdn.bootcss.com/prop-types/15.6.1/prop-types.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.css">
    <style>
        html,
        body {
   
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            position: relative;
        }

        * {
   
            padding: 0;
            margin: 0;
        }


        ul {
   
            width: 100%;
        }

        ul li {
   
            width: 20%;
            height: 10%;
            font-size: 1rem;
            display: inline-block;
            text-align: center;
            box-sizing: border-box;
            padding: 2.5%;
            border: 1px solid black;
        }

        .content {
   
            z-index: 0;
            height: 92%;
            width: 100%;
            overflow-y: scroll;
            position: absolute;
            top: 8%;
            background: white;
        }

        .content div {
   
            height: 4rem;
            font-size: 1rem;
            line-height: 4rem;
            margin-bottom: .17rem;
            background: gray;
            border: 1px solid black;
        }

        .checked {
   
            background: gray;
        }

        .selected {
   
            background: gray;
        }

        .list {
   
            z-index: 1;
            width: 100%;
            background: white;
            position: absolute;
        }

        .list div {
   
            height: 2.5rem;
            font-size: 1rem;
            line-height: 2.5rem;
            padding-left: 5%;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
    </div>
</body>
<script type="text/babel">

    class Position extends React.Component {
   
        constructor() {
   
            super();
            this.state = {
   
                filterList: [
                    {
   
                        title: "经验", key: "c101270", name: "expirence",
                        item: [{
    key: "c101270100", name: "不限" },
                        {
    key: "c101270101", name: "在校生" },
                        {
    key: "c101270102", name:
最低0.47元/天 解锁文章
若星@
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
React.js 之筛选篇
Vicky的博客
07-15 7207
这个框架有听过好几次了，但自己没实现过，今天终于自己学了下，模仿写了这个过滤，妙味视频里面的 目前遇到的情况是用babel会丢失代码提示，但在浏览器中可视。 划分组件，组件链接 table th, table td { text-align: center; }
React自由练习系列(1)：可筛选表单
Echianer的博客
12-28 820
文章目录前言一、目标二、运用知识点三、实现效果四、使用JSON素材/格式五、页面代码总结 前言 主要运用到的是React脚手架+antd 文章是作者的react个人练习，一直觉得单页面设计也是一个学问，但是苦于思索想做的页面是什么。所以我记下自己练手的一些单页面，作为一个自由练习系列，也可以供大家可以参考。 如果本文对你有帮助请点赞????收藏⭐！ 作者后续还会出这个系列！ 一、目标 完成一个数据表格，表格内的值都是以json方式储存，除开正常的显示功能，还需要做到简单的筛选功能 ps：前端页面筛选功能
react实现筛选条件组件
热门推荐
wp12345666666的博客
05-27 1万+
筛选条件组件点全部时选中全部，点其他时全部取消，点击查询时将某个类型下的选择项传出 screenCondition.js文件/** * * title: screenCondition.js * * author: WangPei. * * date: 2017/5/18. * */ import React,{Component} from "react" import Scr
react-filterable-table:具有过滤，排序，分页等功能的可扩展表
05-02
笔记 我不再为此积极地工作，但是请随意分叉。 React可过滤表 具有过滤，排序，分页等功能的可扩展表。 按住shift键可对多个字段进行排序。 安装 npm install react-filterable-table 基本用法： const FilterableTable = require ( 'react-filterable-table' ) ; // Data for the table to display; can be anything const data = [ { name : "Steve" , age : 27 , job : "Sandwich Eater" } , { name : "Gary" , age : 35 , job : "Falafeler" } , { name : "Greg" , age : 24 , job : "Jelly
推荐一款高效的Redux开发利器：Filterable Log Monitor
最新发布
gitblog_00018的博客
06-11 316
推荐一款高效的Redux开发利器：Filterable Log Monitor 项目地址:https://gitcode.com/bvaughn/redux-devtools-filterable-log-monitor 项目介绍 在React和Redux的世界里，调试是一个必不可少的环节。为了提升开发者的工作效率，我们推荐一个强大的工具——redux-devtools-filterable-lo...
react做多条件缓存search组件，公用性比较强
dongakng的博客
02-06 357
react做多条件缓存search组件，公用性比较强
React中的条件渲染
Y974066017的博客
03-21 952
方法1. state={age:18} //条件渲染 方法1 promtWelcome(){ if(this.state.age>=18){ return(<div>已经18岁</div>) }else{ return(<alert>未成年</alert>) } } render() { return ( <div>{this
React框架制作文字列表筛选器代码
07-24
在React框架中制作一个文字列表筛选器，是前端开发中常见的需求，主要用于提高用户体验，让用户能够快速找到所需信息。这个项目实现了一个功能，允许用户通过输入任意单个字符或多字符来实时过滤列表中的项。接下来...
react写法-使用js高阶函数实现多条件搜索功能
06-27
第三步：处理筛选条件 因为我们的数据只有三个字段，即 姓名，年龄，性别。所以我们可以最大设置三个搜索框，也就是三个搜索条件。 如果我们的数据有n个字段，那么我们可以最大设置n个搜索框，也就是n个搜索条件。
react-data-components, 对数据进行排序，筛选和分页的响应组件.zip
09-18
react-data-components, 对数据进行排序，筛选和分页的响应组件 react-data-components DataTable: 现场演示和源代码管理。SelectableTable: 现场演示和源代码管理。正在启动npm install react-data-components -
多条件筛选菜单
11-08
2. 框架集成：使用React、Vue、Angular等前端框架，可以更高效地构建多条件筛选菜单。这些框架提供了丰富的组件库和状态管理工具，简化了开发过程。 3. 移动端适配：对于移动应用，可以采用原生控件或自定义组件...
React入门小项目——美食清单
07-18
2. **使用filter函数过滤数据**：在描述“菜单”部分时，我们可能会遇到根据关键词搜索或筛选菜品的需求。React组件可以接收props作为输入，通过使用JavaScript的filter方法，我们可以基于用户输入的关键词对菜品...
React项目实战之租房app项目（七）列表找房模块之条件筛选
小陈工的博客
01-02 777
1.1.2 实现步骤 在Filter组件中需要完成的步骤： 在FilterPicker组件中需要完成的步骤： 1.1.3 代码示例 在src/pages/HouseList/components/Filter/index.js中添加如下代码： 首先，提供组件展示或隐藏的状态和筛选条件数据： 然后，在render方法中判断openType的值为area/mode/price 时，就显示FilterPicker组件，以及遮罩层： 然后，在标题点击事件中，修改状态openType为当前type，展示对话框： 然后
React查询、搜索类功能的实现
闪电⚡之王的博客简介
07-31 2582
查询之类的如果是通过向列表接口中发送对应参数来查询的，那么在默认输出时，在useEffect钩子中的请求中可以先为需要查询的请求参数设初始的state，也就是null或者未定义，这样的话初始请求的还是整个列表，然后将这些state放入useEffect的依赖中，也就是第二个参数的数组中，然后在一些查询相关的组件中，如下拉选项、Search搜索框、时间选择器等，具体根据可查询项决定，然后更新初始设置的state，set为在这些组件的事件函数中将组件筛选的最终值。...
东方之星酒店管理餐饮项目-多条件查询功能
weixin_57746257的博客
03-07 149
东方之星酒店管理餐饮项目-多条件查询功能 查询效果展示 (1).这是未查询的状态 （2）这是查询后的状态 代码如下： （1）声明一个函数来封装，并且获取输入框中的值，给予路径发送到控制器中。 （2）在控制器中，我们使用selectManagement中的括号来接收传输过来的值，以字符串类型来接收，然后我们再使用Linq查询语句，以SYS_AgreementUnit来联系另外两张表， 再创建一个类，来接收另外两张表的字段名，然后再输出字段名。 （3）字段名输出后.
零基础精通Web前端开发
03-09
讲师有多个知名企业商业项目的成功经验，讲师将多年带领团队提供技术服务的知识提炼出初级前端开发工程师必备的知识点。课程提供了大量的案例和作业供学员掌握讲解的知识点，并在课时材料中提供扩展性阅读材料，帮助学员更好的入门前端技术。为了保证学员能有持续的学习兴趣，课程案例均采用实际可以商业化使用的项目，而且提供了完整的后台程序帮助学员完成练习和作业。课程一共356分钟，每天学习1小时的话，6天可以观看完毕。手把手案例和作业 手把手案例：使用React实现支持撤销重做的像素画绘制程序
React：Antd中Table表格实现自定义筛选
QY_99的博客
01-18 3806
React：Antd中Table表格实现自定义筛选
react native筛选功能
06-09
React Native是一种跨平台的移动应用开发框架，可以使用其构建出具有良好用户体验的原生应用。实现筛选功能可以使用React Native提供的组件和函数进行开发。 一般来说，筛选功能需要以下几个步骤： 1. 获取数据：从后台或本地数据源中获取需要进行筛选的数据。 2. 显示数据：使用React Native提供的FlatList或SectionList等组件将数据显示在界面中。 3. 添加筛选条件：可以使用React Native提供的TextInput、Picker等组件让用户输入筛选条件，也可以使用自定义组件。 4. 筛选数据：根据用户输入的筛选条件，对数据进行筛选。 5. 更新界面：将筛选后的数据更新到界面上。 具体实现方法可以参考React Native官方文档和相关教程。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值