最近在学 React.js，对于初学者来说，写个基本的 todolist 对于理解 React 中的一些概念及语法倒是挺有帮助的。todolist涉及了增删改查四大功能，可以使初学者进一步了解React。
如果不太了解react的基本用法的话可以参考一下这篇文章。废话不多说，我们直接上代码。
1. 首先我们先做一个增加的功能。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.js"></script>
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
class App extends React.Component {
// 定义初始状态
constructor() {
super()
this.state = {
list: []
}
}
// 添加功能
add = (e) => {
// 键盘回车
//this.input.value.trim() 去除空格
if (this.input.value.trim() !== "" && e.keyCode === 13) {
// 更改组件维护的list状态
this.state.list.push(this.input.value)
this.setState({
list: this.state.list
},()=>{
this.input.value = "" //输入框内容清空
})
}
}
render() {
let { list } = this.state;
return (
<div>
<input type="text" onKeyUp={this.add} ref={el => this.input = el} />
<ul>
{
// 遍历输入框添加的内容
list.map((item, index) => {
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("box"))
</script>
</body>
</html>
效果：
在添加的时候，我们不可能在用户未输入文本或者输入空格也给用户添加事例，这样用户体验是极差的！！
所以我们在用户回车添加事项的时候，要判断一下用户是否有输入内容，索性我们直接用 this.input.value.trim() !== “” 判断，这样既可以判断有没有传值，也可以去掉前后空格，一举两得。
2. 实现添加功能之后，我们接着来尝试一下删除功能。
首先个todolist添加删除的功能，我们可以使用splice删除功能，
// 删除功能
remove = index => {
if (confirm("你确定要删除嘛")) {
this.state.list.splice(index, 1)
// 重新渲染视图
this.setState({
list: this.state.list
})
}
}
也可以使用filter过滤器过滤要删除的对象，
// 删除功能
remove = index => {
if (confirm("你确定要删除嘛")) {
this.setState({
list:this.state.list.filter((item,ind)=>{
if(ind !== index){ //内部的ind与外部传入的index如果不一致
return true
}
})
})
}
}
再在我们添加的每一项的实现后面添加一个删除按钮。
<ul>
{
// 遍历输入框添加的内容
list.map((item, index) => {
return <li key={index}>
{item}
<button onClick={this.remove.bind(this, index)}>删除</button>
</li>
})
}
</ul>
这样就可以实现我们的删除功能了。
3. 接下来就是修改功能。
添加一个修改功能和修改按钮（与上相同）。
// 修改功能
modify = index => {
var newValue = prompt("修改数据") //弹窗输入修改的值
this.state.list[index] = newValue //指定数组具体某一项内容改变成什么值
this.setState({
list:this.state.list
})
}
<button onClick={this.modify.bind(this, index)}>修改</button>
效果：
4. 最后一个就是查找功能了，
相对与前面几个功能来说，查找功能是比较难实现的。我们在实现这个查找功能的时候，不仅要实现查找数据列表出现时添加列表隐藏，还有一个返回添加列表的功能，最后还要实现一个关键词高亮显示。具体实现过程如下
// 模糊查询
blurFind = () => {
// 查找关键字
var keyword = prompt("请输入关键字")
//从list数组里面去过滤关键字
var result = this.state.list.filter(item => item.includes(keyword))
// 高亮效果
result.forEach((item, i, arr) => {
arr[i] = item.replace(new RegExp(keyword, "g"), "<span style='color:red'>" + keyword + "</span>")
})
// 更新状态
this.setState({
arr: result,
flag: false //让list消失
})
}
// 搜索列表返回添加列表
list = () => {
this.setState({
flag: true, //让list继续显示
arr: [] //清空关键字的数组
})
}
//添加查询按钮和返回按钮
<button onClick={this.blurFind}>模糊查询</button>
<button onClick={this.list}>返回list</button>
效果：
好了，一个简单的todolist案例就实现了。如果想让这个tidolist更加好看，你可以添加一些css样式修饰一下。这里就不做演示了。下面展示全部代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./js/react.development.js"></script>
<script src="./js/react-dom.development.js"></script>
<script src="./js/babel.js"></script>
<title>Document</title>
</head>
<body>
<div id="box"></div>
<script type="text/babel">
class App extends React.Component {
// 定义初始状态
constructor() {
super()
this.state = {
list: [], //用来显示所有的todolist数据
arr: [], //用来存储keyword的数组
flag: true //默认显示list数组
}
}
// 添加功能
add = (e) => {
// 键盘回车
//this.input.value.trim() 去除空格
if (this.input.value.trim() !== "" && e.keyCode === 13) {
// 更改组件维护的list状态
this.state.list.push(this.input.value)
this.setState({
list: this.state.list
}, () => {
this.input.value = "" //输入框内容清空
})
}
}
// 删除功能
remove = index => {
if (confirm("你确定要删除嘛")) {
// this.state.list.splice(index, 1)
// // 重新渲染视图
// this.setState({
// list: this.state.list
// })
this.setState({
list: this.state.list.filter((item, ind) => {
if (ind !== index) { //内部的ind与外部传入的index如果不一致
return true
}
})
})
}
}
// 修改功能
modify = index => {
var newValue = prompt("修改数据") //弹窗输入修改的值
this.state.list[index] = newValue //指定数组具体某一项内容改变成什么值
this.setState({
list: this.state.list
})
}
// 模糊查询
blurFind = () => {
// 查找关键字
var keyword = prompt("请输入关键字")
//从list数组里面去过滤关键字
var result = this.state.list.filter(item => item.includes(keyword))
// 高亮效果
result.forEach((item, i, arr) => {
arr[i] = item.replace(new RegExp(keyword, "g"), "<span style='color:red'>" + keyword + "</span>")
})
// 更新状态
this.setState({
arr: result,
flag: false //让list消失
})
}
// 搜索列表返回添加列表
list = () => {
this.setState({
flag: true, //让list继续显示
arr: [] //清空关键字的数组
})
}
render() {
let { list, arr, flag } = this.state;
return (
<div>
<input type="text" onKeyUp={this.add} ref={el => this.input = el} />
<button onClick={this.blurFind}>模糊查询</button>
<button onClick={this.list}>返回list</button>
{/* 添加的数组 */}
<ul style={{ display: flag ? 'block' : 'none' }}>
{
// 遍历输入框添加的内容
list.map((item, index) => {
return <li key={index}>
{item}
<button onClick={this.remove.bind(this, index)}>删除</button>
<button onClick={this.modify.bind(this, index)}>修改</button>
</li>
})
}
</ul>
{/* 搜索显示的数组 */}
<ul>
{
arr.map((item, index) => {
return <li key={index}>
<div dangerouslySetInnerHTML={{ __html: item }}></div>
</li>
})
}
</ul>
</div>
)
}
}
ReactDOM.render(<App />, document.getElementById("box"))
</script>
</body>
</html>