浅谈React实现todolist_react.js做todolist-优快云博客

本文链接：https://blog.youkuaiyun.com/zhouziyu2011/article/details/70460983

本文介绍了一个使用React实现的待办事项应用。该应用包括添加和删除待办事项的功能，并展示了如何通过React的状态管理和组件之间的通信来实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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")
);