浅谈React实现todolist

爱被打了一巴掌 2022-06-17 09:18 245阅读 0赞

todoList.html：

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

todoList.jsx：

var TodoList = React.createClass({
    	getInitialState: function() {
    		return {lists: []}
    	},
    	addList: function(list) {
    		if (this.state.lists.indexOf(list) == -1) {
    			this.state.lists.push(list);
    			this.setState({lists: this.state.lists});
    		}
    	},	
    	deleteList: function(index) {
    		this.state.lists.splice(index, 1);
    		this.setState({lists: this.state.lists});
    	},
    	render: function() {
    		return (
    			<div>
    				<AddList addList={this.addList} />
    				<DeleteList deleteList={this.deleteList} lists={this.state.lists} />
    			</div>
    		);
    	}
    });
    var AddList = React.createClass({
    	addList: function(e) {
    		e.preventDefault();
    		this.props.addList(this.refs.textInput.value);
    		this.refs.textInput.value = "";
    	},
    	render: function() {
    		return (
    			<form onSubmit={this.addList}>
    				<input type="text" placeholder="Please enter your name!" ref="textInput" autoComplete="off"/>
    			</form>
    		);
    	}
    });
    var DeleteList = React.createClass({
    	deleteList: function(e) {
    		var index = e.target.getAttribute('id');
    		this.props.deleteList(index);
    	},
    	render: function() {
    		return (
    			<ul>
    			{
    				this.props.lists.map(function(list, index) {
    					return (
    						<li key={index}> 
    							{list}
    							<button id={index} onClick={this.deleteList}>x</button>
    						</li>
    					);
    				}.bind(this))
    			}
    			</ul>
    		);
    	}
    });
    ReactDOM.render(
    	<TodoList />,
    	document.getElementById("todoList")
    );

发表评论取消回复

表情：

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

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

相关阅读

相关 React实现TodoList案例

1.创建 `Todolist.js` 组件 import React from 'react'; class TodoList extends

女爷i/ 2023年07月19日 15:27/ 0 赞/ 48 阅读

相关 react 实现 todolist

react 实现 todolist 这次主要是布局方面目录 react 实现 todolist 目录结构 pages/to

蔚落/ 2022年12月11日 07:58/ 0 赞/ 221 阅读

相关浅谈React mixins

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

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

相关浅谈React实现过滤器

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

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

相关浅谈React实现输入框

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

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

相关浅谈React实现搜索匹配

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

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

相关浅谈React实现todolist

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

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

相关 react实现TodoList案例

说明一下：实现这个案例需要准备的东西实在太多，不可能把所有的代码都贴上来（贴了，您也未必想看啊，哈）所以，css代码，配置文件，无关逻辑的就不往这上面贴了（想必大家既然选择做这

今天药忘吃喽~/ 2022年05月24日 03:35/ 0 赞/ 243 阅读

相关浅谈React Hooks

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

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

相关 DRF + react 实现TodoList

在web项目构建中有很多框架可供选择，开发人员对项目的使用选择，有很多的影响因素，其中之一就是框架在定义该项目的单独任务时的复杂性。简介本文有如下几个部分：

拼搏现实的明天。/ 2021年11月22日 10:20/ 0 赞/ 438 阅读