浅谈React实现输入框

浅浅的花香味﹌ 2022-06-17 12:06 400阅读 0赞

组件要实现的功能：

1、定制label和输入框的placeholder的内容；

2、输入的内容不符合正则表达式要求时，输入框标红，符合时标绿；

3、点击清除按钮后，按钮消失并清除输入框内容；

4、对外开放3个方法：获取、设置、删除输入框的内容（trim）。

inputBox.html：

<!DOCTYPE html>
    <html>
    	<head>
    		<link rel="stylesheet" href="inputBox.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="inputBox"></div>
    		<script type="text/babel" src="inputBox.jsx"></script>
    	</body>
    </html>

inputBox.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 条评论，400人围观）

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

相关阅读

相关浅谈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 赞/ 302 阅读

相关浅谈React实现输入框

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

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

相关浅谈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 赞/ 238 阅读

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

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

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

相关浅谈React.createElement()方法

document有createElement()方法，React也有createElement()方法，下面就来介绍React的createElement()方法。

超、凢脫俗/ 2022年06月17日 09:42/ 0 赞/ 825 阅读

相关浅谈React实现搜索匹配

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

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

相关浅谈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 阅读