react简易todolist案例

最新推荐文章于 2025-02-12 17:36:10 发布

落花不羡月

最新推荐文章于 2025-02-12 17:36:10 发布

阅读量1k

点赞数

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/xing942012/article/details/121960686

版权

这篇博客介绍了如何使用React创建一个简单的Todo应用。首先通过npx create-react-app搭建项目，然后在src目录下创建todo文件夹及HeaderTodo.js组件。博客详细阐述了组件的状态管理，包括存储数据、渲染列表、添加和删除任务的功能实现，以及事件处理方法。在添加和删除操作中，正确地使用了this.setState来更新状态。

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

首先先创建一个react的脚手架，npx create-react-app my-app(这边的名字自己取)，然后我在src下创建了一个todo文件夹，在文件夹里创建了一个HeaderTodo.js文件，先将src下的index.js清空

然后在index.js中导入文件，添加一个页面渲染，否则页面不会有任何内容

import React from 'react';
import ReactDOM from 'react-dom';
import App from './todo/HeaderTodo.js'

ReactDOM.render(<App />,document.getElementById('root'))

HeaderTodo.js

首先得先创建组件App，state中用来存储数据，要修改的话需要this.setState方法，否则无法修改还会报错，render用来渲染标签

import React from 'react';

// 创建组件
class App extends React.Component{
	state={
		comments:[],
		txt:''
	}
	
	// 渲染
	renderList(){
		const { comments } = this.state;
		return(
		<ul>
		{
			comments.map(item=> <li key={item.id}>
			    <span>{item.txt}</span>
				<button onClick={this.deleteClick}>删除</button>
			</li>)
		}
		</ul>
		)
	}
	// 删除
	deleteClick=(index)=>{
		let comments = this.state.comments
		comments.splice(index,1)
		this.setState({
			comments:comments
		})
	}
	
	// 修改表单value
	handleForm = (e)=>{
	    const {name, value} = e.target;

	    this.setState((state)=>{
	        return {
	            [name]: value
	        }
	    })
	}
	
	
	handleClick = () => {
		const {txt,comments} = this.state;
		const comment = {
		    id: Math.random(),
		    txt
		}
		this.setState({
			comments:[comment,...comments],
			txt:''
		})
	}
	
	render(){
		const {txt} = this.state
		return (
			<div>
			<input type="text" name="txt" value={txt} onChange={this.handleForm} />
			<button onClick={this.handleClick}>添加</button>
			{this.renderList()}
			</div>
		)
	}
}
// 导出
export default App

写完点击添加，点击删除都生效