<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- <script src="http://localhost:8097"></script> -->
<script src="https://cdn.staticfile.org/react/16.8.6/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.8.6/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<script src="https://cdn.bootcss.com/prop-types/15.7.2/prop-types.js"></script>
<title>To-Do-List</title>
<style>
* {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
.to-do-list {
width: 500px;
height: 500px;
margin: 50px auto;
border: 2px solid #ccc;
}
h1 {
width: 100px;
height: 50px;
margin: 0 auto;
}
section {
width: 500px;
height: 400px;
margin: 0 auto;
background-color: rgba(241, 233, 233, 0.6);
}
.add-thing {
width: 500px;
height: 50px;
text-align: center;
}
.add-thing input {
height: 20px;
margin: 20px;
}
.list {
width: 400px;
min-height: 200px;
margin: auto;
border: 1px solid rgb(215, 218, 209);
}
.list ul li {
width: 400px;
padding: 5px 0;
}
.list ul li input {
width: 150px;
}
.list ul li span {
display: inline-block;
width: 50px;
margin-left: 20px;
border: 1px solid #999;
text-align: center;
float: right;
}
</style>
</head>
<body>
<div id="root"></div>
<!-- <script type="text/babel" src="./input.js"></script> -->
<script type="text/babel">
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
arr: [
{
id: new Date().getTime(),
text: "第一件事写代码",
flag: false
}
],
msg: ""
};
}
render() {
return (
<div className="to-do-list">
<h1>记事本</h1>
<section>
<div className="add-thing">
<input
type="text"
placeholder="填写事务"
value={this.state.msg}
onChange={this.upd.bind(this)}
/>
<input
type="button"
value="添加事务"
onClick={this.add.bind(this)}
/>
</div>
<div className="list">
<ul>
{this.state.arr.map((ele, index) => {
var msgele = ele.text;
if (ele.flag) {
msgele = <del>{ele.text}</del>;
}
return (
<li key={ele.id}>
{msgele}
<span onClick={this.del.bind(this, index)}>删除</span>
<span onClick={this.fin.bind(this, index)}>完成</span>
</li>
);
})}
</ul>
<div>
已完成：{this.finNum()} | 未完成：
{this.state.arr.length - this.finNum()}
</div>
</div>
</section>
</div>
);
}
//input框内容更新
upd() {
this.setState({
msg: event.target.value
});
}
//添加按钮
add() {
var list = JSON.parse(JSON.stringify(this.state.arr));
list.push({
id: new Date().getTime(),
text: this.state.msg,
flag: false
});
this.setState({
arr: list,
//清空输入框
msg: ""
});
}
//删除按钮
del(id) {
var list = JSON.parse(JSON.stringify(this.state.arr));
list.splice(id, 1);
this.setState({
arr: list
});
}
//完成按钮
fin(id) {
var list = JSON.parse(JSON.stringify(this.state.arr));
list[id].flag = true;
this.setState({
arr: list
});
}
//已完成事件数
finNum() {
var n = 0;
this.state.arr.forEach(function(ele) {
if (ele.flag) {
n++;
}
});
return n;
}
}
ReactDOM.render(<App></App>, document.getElementById("root"));
</script>
</body>
</html>
效果：
图片.png
