class定义组件练习——todolist待办事项
class定义的组件跟function定义的组件是可以混合使用的
setState是异步的,他可以接收两个参数,参数一表示数据,参数二表示数据改变之后的回调函数。
代码如下:
<body>
<div id="app"></div>
<script src="http://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react@17.0.2/umd/react.development.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script type="text/babel">
const { Component, useState } = React;
class TodoList extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
};
this.saveHandle = this.saveHandle.bind(this);
}
saveHandle(e) {
if (e.keyCode === 13 && e.target.value) {
// setState是异步的,他可以接收两个参数,参数一表示数据,参数二表示数据改变之后的回调函数
this.setState(
{
list: [
...this.state.list,
{
id: Date.now(),
content: e.target.value,
isEnd: false,
},
],
},
function () {
console.log("获取最新的数据");
console.log(this.state.list);
}
);
}
}
endHandle(id) {
this.setState({
list: this.state.list.map((item) => {
if (item.id == id) {
return {
...item,
isEnd: true,
};
}
return { ...item };
}),
});
}
delHandle(id) {
this.setState({
list: this.state.list.filter((item) => item.id != id),
});
}
render() {
const { list } = this.state;
return (
<>
<h1>{this.props.title}</h1>
<input
type="text"
placeholder="请输入内容"
onKeyUp={this.saveHandle}
/>
<ul>
{list.map((item) => (
<li key={item.id}>
{item.content}
{item.isEnd ? null : (
<button onClick={() => this.endHandle(item.id)}>
完成
</button>
)}
<button onClick={() => this.delHandle(item.id)}>
删除
</button>
</li>
))}
</ul>
</>
);
}
}
const App = () => {
const [count, setCount] = useState(1);
return <TodoList title="待办事项" />;
};
ReactDOM.render(<App />, document.getElementById("app"));
</script>
</body>
运行截图: