react简易todolist案例

首先先创建一个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

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