使用React做一个简单的todolist小demo
新建一个react项目 todolist
// 创建react项目
npx create-react-app todolist
// 进入到todolist文件夹里
cd todolist
// 运行项目
npm start
运行结果如图所示:
为了方便查看React组件树,安装扩展 React Devtools
// 进入src目录
cd src
// 删除src目录下的所有文件
del *
// 然后回到项目文件夹
cd ..
在src目录下新建文件index.js
import React, {
Component } from 'react';
import ReactDom from 'react-dom';
// TodoList组件
class TodoList extends Component {
render() {
return (
<div>
TodoList
</div>
);
}
}
ReactDom.render(<TodoList />,document.getElementById("root"));
写出todolist的基本结构
index.js
import React, {
Component } from 'react';
import ReactDom from 'react-dom';
// TodoList组件
class TodoList extends Component {
render() {
return (
<div>
<input /><button>增加</button>
<ul>
<li>数据1<button>删除</button></li>
<li>数据2<button>删除</button></li>
<li>数据3<button>删除</button></li>
<li>数据4<button>删除</button></li>
<li>数据5<button>删除</button></li>
</ul>
</div>
);
}
}
ReactDom.render(<TodoList />,document.getElementById("root"));
用数组把数据存储起来
import React, {
Component } from 'react';
import ReactDom from 'react-dom';
// TodoList组件
class TodoList extends Component {
constructor(props){
super(props);
this.state = {
todolist : ["数据1","数据2","数据3","数据4","数据5"]
}
}
render() {
return (
<div>
<input /><button>增加</button>
<ul>
{
this.state.todolist.map((item,index) => {
return <li key={
index}>{
item}<button>删除</button></li>
})
}
</ul>
</div>
);
}
}
ReactDom.render(<TodoList />,document.getElementById("root"));
监听输入框里面的内容,与state 里的inputValue绑定起来
import React, {
Component } from 'react';
import ReactDom from 'react-dom';
// TodoList组件
class TodoList extends Component {
constructor(props){
super(props);
this.state = {
todolist : ["数据1","数据2","数据3","数据4","数据5"],
inputValue : ''
}
}
// 监听输入框里面的内容
inputChange = (e) => {
console.log(e