浅谈React实现过滤器

喜欢ヅ旅行 2022-06-17 12:17 300阅读 0赞

思路：

1、在最顶层组件中创建state；

2、监听底层组件的输入框和多选按钮的onchange事件，借助this.prop通过函数传递输入框和多选按钮的值给上层组件；

3、上层组件通过this.setState()函数更新state，重新渲染整个组件；

4、通过原始数据及输入框和多选按钮的值组合计算得出过滤结果。

数据包括：

1、原始数据

2、文本框的值

3、复选框的值

4、过滤结果

原始数据以 props 传入，而过滤结果可以通过通过原始数据及输入框和多选按钮的值组合计算得出，因此state值包括：

1、文本框的值

2、多选按钮的值

filter.html：

<!DOCTYPE html>
    <html>
    	<head>
    		<link rel="stylesheet" href="filterBox.css">
    		<script src="build/react.js"></script>
    		<script src="build/react-dom.js"></script>
    		<script src="build/browser.min.js"></script>
    	</head>
    	<body>
    		<div id="filterBox"></div>
    		<script type="text/babel" src="filterBox.jsx"></script>
    	</body>
    </html>

filter.jsx：

var grades = [
    	{team: "Team1", name: "Alice", grade: 80},
    	{team: "Team1", name: "Bruce", grade: 90},
    	{team: "Team1", name: "Cindy", grade: 50},
    	{team: "Team2", name: "David", grade: 40},
    	{team: "Team2", name: "Emy", grade: 60},
    	{team: "Team2", name: "Fruid", grade: 70}
    ];
    var FilterBox = React.createClass({
    	getInitialState: function() {
    		return {
    			inputText: "",
    			showPassingOnly: false
    		};
    	},
    	filter: function(inputText, showPassingOnly) {
    		this.setState({
    			inputText: inputText,
    			showPassingOnly: showPassingOnly
    		});
    	},
    	render: function() {
    		return (
    			<div>
    				<SearchBox onInput={this.filter} inputText={this.state.inputText} showPassingOnly={this.state.showPassingOnly} />
    				<GradeList grades={this.props.grades} inputText={this.state.inputText} showPassingOnly={this.state.showPassingOnly} />
    			</div> 
    		);
    	}
    });
    var SearchBox = React.createClass({
    	filter: function() {
    		this.props.onInput(
    			this.refs.input.value,
    			this.refs.checkbox.checked
    		);
    	},
    	render: function() {
    		return (
    			<form>
    				<input id="text" type="text" ref="input" placeholder="Sreaching..." onChange={this.filter} value={this.props.inputText}/><br/>
    				<input type="checkbox" ref="checkbox" checked={this.props.showPassingOnly} onChange={this.filter}/>Only show passing grades
    			</form>
    		);
    	}
    });
    var GradeList = React.createClass({
    	render: function() {
    		var rows = [];
    		var teams = [];
    		this.props.grades.forEach(function(grade, index) {
    			if (grade.name.toLowerCase().indexOf(this.props.inputText) == -1 || this.props.showPassingOnly && grade.grade < 60)
    				return;
    			if (teams.indexOf(grade.team) == -1) {
    				rows.push(<Team team={grade.team} key={"team" + index}></Team>);
    				teams.push(grade.team);
    			}
    			rows.push(<Grade name={grade.name} grade={grade.grade} key={"grade" + index}></Grade>);
    		}.bind(this));
    		if (rows.length == 0) 
    			rows.push(<tr key={"noMatches"}><td colSpan="2">No matches!</td></tr>);
    		return (
    			<table>
    				<thead>
    					<tr>
    						<th>Name</th>
    						<th>Grade</th>
    					</tr>
    				</thead>
    				<tbody>
    					{rows}
    				</tbody>
    			</table>
    		);
    	}
    });
    var Team = React.createClass({
    	render: function() {
    		return (
    			<tr>
    				<td colSpan="2">{this.props.team}</td>
    			</tr>
    		);
    	}
    });
    var Grade = React.createClass({
    	render: function() {
    		return (
    			<tr>
    				<td>{this.props.name}</td>
    				<td>{this.props.grade}</td>
    			</tr>
    		);
    	}
    });
    ReactDOM.render(
    	<FilterBox grades={grades} />,
    	document.getElementById('filterBox')
    );

发表评论取消回复

表情：

评论列表（有 0 条评论，300人围观）

还没有评论，来说两句吧...

相关阅读

相关浅谈布隆过滤器

一、布隆过滤器是什么布隆过滤器（Bloom Filter）是1970年由布隆提出的。它实际上是一个很长的二进制向量和一系列随机映射函数。布隆过滤器可以用于检索一个元素是否

矫情吗；*/ 2023年07月14日 12:58/ 0 赞/ 32 阅读

相关浅谈React mixins

组件是React复用代码的最佳方式，但有时一些不同的组件间也需要共用一些功能，被称为跨切面关注点，React使用 mixins 来解决这类问题。一个通用的场景是：一个组件

港控/mmm°/ 2022年06月17日 13:44/ 0 赞/ 255 阅读

相关浅谈React实现过滤器

思路： 1、在最顶层组件中创建state； 2、监听底层组件的输入框和多选按钮的onchange事件，借助this.prop通过函数传递输入框和多选按钮的值给上层组件；

喜欢ヅ旅行/ 2022年06月17日 12:17/ 0 赞/ 301 阅读

相关浅谈React实现输入框

组件要实现的功能： 1、定制label和输入框的placeholder的内容； 2、输入的内容不符合正则表达式要求时，输入框标红，符合时标绿； 3、点击清除按钮后，按钮消

浅浅的花香味﹌/ 2022年06月17日 12:06/ 0 赞/ 398 阅读

相关浅谈React实现评论框（三）

[http://blog.csdn.net/zhouziyu2011/article/details/70504651][http_blog.csdn.net_zhouziyu

叁歲伎倆/ 2022年06月17日 10:51/ 0 赞/ 325 阅读

相关浅谈React实现评论框（二）

[http://blog.csdn.net/zhouziyu2011/article/details/70502495][http_blog.csdn.net_zhouziyu

Bertha 。/ 2022年06月17日 09:50/ 0 赞/ 235 阅读

相关浅谈React实现评论框（一）

结构：第一层——CommentBox 第二层——CommentList 第三层——Comment 第二层——CommentForm 1、JSX

心已赠人/ 2022年06月17日 09:49/ 0 赞/ 341 阅读

相关浅谈React实现搜索匹配

search.html： <!DOCTYPE html> <html> <head> <link rel="stylesheet" hr

傷城~/ 2022年06月17日 09:18/ 0 赞/ 241 阅读

相关浅谈React实现todolist

todoList.html： <!DOCTYPE html> <html> <head> <link rel="styleshee

爱被打了一巴掌/ 2022年06月17日 09:18/ 0 赞/ 238 阅读

相关浅谈React Hooks

> 由于工作的原因我已经很长时间没接触过React了。前段时间圈子里都在讨论React Hooks，出于好奇也学习了一番，特此整理以加深理解。缘由在web应用无所不

古城微笑少年丶/ 2022年03月06日 05:18/ 0 赞/ 332 阅读