1.效果图:
2.项目源码
3.源码
TodoList.js
import React, { Component, Fragment } from 'react'; import TodoItem from './TodoItem' import './style.css' //定义一个React组件 class TodoList extends Component { constructor(props) { super(props); this.state = { list: [], inputValue: '', } this.handleInputChange = this.handleInputChange.bind(this); this.handleBtnClick = this.handleBtnClick.bind(this); this.handleDelete = this.handleDelete.bind(this); } handleBtnClick() { if (this.state.inputValue == '') { alert("请输入代办项内容"); return; } this.setState({ list: [...this.state.list, this.state.inputValue], inputValue: '', }); } handleInputChange(e) { this.setState({ inputValue: e.target.value }); //console.log(e.target.value) } handleDelete(index) { const list = [...this.state.list]; list.splice(index, 1); this.setState({ list: list }) } getTodoItems() { return ( this.state.list.map((item, index) => { return ( <TodoItem delete={this.handleDelete} key={index} content={item} index={index} />) }) ) } render() { return ( <div className='w'> <div className="header"> <div className="header-content"> <span className='logo'>ToDoList</span> <div className="addItem"> <input placeholder="添加ToDo" value={this.state.inputValue} onChange={this.handleInputChange} /> <button onClick={this.handleBtnClick}>add</button> </div> </div> </div> <ul className="main"> <div className="main-header"> <span>正在进行</span> </div> <div className="main-content"> {this.getTodoItems()} </div> <div className="main-header"> <span>已经完成</span> </div> </ul> <div className="footer"> <span>Created by Elylic @2020-9 todolist.cn</span> </div> </div> ); } } //导出组件 export default TodoList;
TodoItem.js
import React ,{Component} from 'react' import './item.css' class TodoItem extends Component{ constructor(props){ super(props); this.handleDelete = this.handleDelete.bind(this) } handleDelete(){ this.props.delete(this.props.index); } render(){ const {content } = this.props; return ( <div> <p className="todo-item"><input type="checkbox"/>{content} <button className="todo-delete" onClick={this.handleDelete}>delete</button> </p> </div> ) } } export default TodoItem;
index.js
/** * 整个项目的入口文件 */ //引入React库,理解语法 import React from 'react'; //引入ReactDom让我们可以将一个组件挂载到DOM组件 import ReactDOM from 'react-dom'; //App组件,大写字母开头 import TodoList from './TodoList'; //将组件渲染到页面上 ReactDOM.render(<TodoList />,document.getElementById('root'));
style.css
.w{
100%;
background-color: #c7c6c7;
padding: 0;
margin: 0;
}
/*头部*/
.header{
100%px;
height: 50px;
margin: 0 auto;
background-color:#2D2c2D
}
.header-content{
500px;
margin: 0 auto;
}
.logo{
display: inline-block;
float: left;
color: #D9D4D4;
font-size: 26px;
font-weight: bold;
line-height: 20px;
padding-top: 15px;
}
.addItem{
float: right;
margin-left: 100px;
padding-top: 15px;
}
.addItem input{
display: inline-block;
200px;
height: 20px;
border-radius: 5px;
padding: 0px 10px;
font-size: 12px;
}
.addItem button{
background: #ffffff;
color:#2D2c2D;
border-radius: 5px;
}
/*主体内容*/
.main{
500px;
padding:0;
margin: 0 auto;
background-color: #c7c6c7;
}
.main-header span{
display: inline-block;
font-size: 20px;
font-weight: bold;
margin: 20px 0;
}
/*底部区域*/
.footer{
300px;
padding:0;
margin: 0 auto;
text-align: center;
font-size: 12px;
color:#78777A;
background-color: #c7c6c7;
padding-bottom: 12px;
}
item.css
.todo-item{
display: block;
480px;
background-color: #ffffff;
border-radius: 3px;
padding: 5px 10px;
font-size: 16px;
margin: 5px 0h;
}
.todo-item input{
float: left;
margin-right: 10px;
}
.todo-delete{
float: right;
color:#2D2c2D;
}
更多参考链接:https://blog.csdn.net/sinat_38368658/article/details/108732416