初始化页面

• 先画出来一个界面，在这里面进行操作
• 通过数组的形式展现数据
• 通过 this.state.list.map() 遍历数组
• 通过 this.setState({}) 来改变数据的值
• 完整代码在最下面

    <div id="app"></div>

    <script type="text/babel">
        class App extends React.Component {
            constructor() {
                super()
                this.state = {
                    list: ["大家好，这里是第一个参数","第二个参数"]
                }
            }
            render() {
                return (
                    <div>
                        <input type="text"/>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    <div key={index} className="box">
                                        <li>{item}</li>
                                    </div>
                                )
                            })
                        }
                    </div>
                )
            }
        }
        ReactDOM.render(<App />, document.getElementById("app"))
    </script>

1. 实现增加

• 通过向数组中添加数据，来改变显示
• 通过判断键盘事件是否为 回车键进行增加

<input type="text" onKeyUp={this.add} />

add = (e) => {
    if (e.keyCode === 13) {
        this.setState({
            list: [e.target.value, ...this.state.list]
        })
        e.target.value = ""
    }

结果展示：

2. 删除

• 共两种方法
  1. 通过 splice(0,1) 实现删除
  2. 通过 filter(()=>{}) 过滤 实现删除
  3. 需要使用到 索引

<button onClick={this.delete.bind(this,index)}>删除</button>

//第一种方法
del = (index)=>{
    let listDel = this.state.list.splice(index,1)
    this.setState({
        list:this.state.list
    })
}

//第二种方法
del = (index)=>{
    //数组的filter方法，内部将返回值为true的元素重新放入到一个新的数组里面进行返回。
    this.setState({
        list:this.state.list.filter((item,i)=>{
            if(i === index) return false;
            return true
        })
    })
}

效果图：

3. 修改

• 通过 js 的 prompt("输入修改内容")弹出框 来获取新内容
• 需要使用到 索引

<button onClick={this.update.bind(this,index)}>修改</button>

update = index=>{
    let newValue = prompt("请输入修改的值：")
    if(newValue){
        this.state.list[index] = newValue   //将需要修改的值赋值为newValue
        this.setState({
            list:this.state.list
        })
    }
}

效果图：

4. 查询

• 新建一个数组，用于存放查询到的字符
• 通过 filter(()=>{})+includes() 实现模糊查询
• 通过 replace() 方法用于在字符串中自己设置的高亮字符 替换 查到的字符
• 通过 new RegExp(keyword,"g") 实现单个字符查询并且高亮显示
• 通过 dangerouslySetInnerHTML={{__html:html元素} 进行渲染

<button onClick={this.blurFind}>模糊查询</button>

blurFind = ()=>{ 
    let keyword = prompt("请输入查询关键字！")  //输入关键字进行查询
    let result = this.state.list.filter((item,i)=>{  //从list里面进行遍历字符串，然后看看是否包含关键字
        if(item.includes(keyword)){
            return true
        }
        return false
    })
    //实现关键词高亮
    result.forEach((item,i,arr)=>{
        arr[i] = arr[i].replace(new RegExp(keyword,"g"),"<span style='color:red'>"+keyword+"</span>")
    })
    this.setState({   //将查询到的数据存放到 arr 数组里面
        arr:result,
    })
}

效果图：

完整代码

<div id="app"></div>

    <script type="text/babel">
        class App extends React.Component{
            constructor(){
                super()
                this.state = { //定义组件初始化状态
                    list:[],
                    arr:[],     //放入匹配后的内容
                }
            }

            //键盘回车添加数据
            add = (e)=>{
                if(e.keyCode === 13){
                    this.setState({
                        list: [...this.state.list,e.target.value]
                    })
                    e.target.value = ""
                }
            }
            //实现删除
            delete = (index)=>{
                this.setState({
                    list:this.state.list.filter((item,i)=>{
                        if(i === index) return false;
                        return true
                    })
                })
            }
            //修改
            update = index=>{
                let newValue = prompt("请输入修改的值：")
                console.log(newValue)
                if(newValue){
                    //将需要修改的值赋值为newValue
                    this.state.list[index] = newValue
                    this.setState({
                        list:this.state.list
                    })
                }
            }
            //模糊查询
            blurFind = ()=>{
                let keyword = prompt("请输入查询关键字！")
                let result = this.state.list.filter((item,i)=>{
                    if(item.includes(keyword)){
                        return true
                    }
                    return false
                })
                //实现关键词高亮
                result.forEach((item,i,arr)=>{
                    arr[i] = arr[i].replace(new RegExp(keyword,"g"),"<span style='color:red'>"+keyword+"</span>")
                })
                this.setState({
                    arr:result,
                    flag:false  //更改状态
                })
            }
            render(){
                let { list,arr,flag } = this.state
                return (
                    <div>
                        <input type="text" onKeyUp={this.add}/>
                        <button onClick={this.blurFind}>模糊查询</button>
                        <button onClick={this.backList}>返回列表</button>
                        <ul style={{display:flag?'block':'none'}}>
                            {
                                list.map((item,index)=>{
                                    return <li key={index}>
                                        {item}
                                        <button onClick={this.delete.bind(this,index)}>删除</button>
                                        <button onClick={this.update.bind(this,index)}>修改</button>
                                    </li>
                                })
                            }
                        </ul>
                        <ul>
                            {
                                arr.map((item,index)=>{  //一旦item是个字符串<span>我是span</span>
                                    return <li key={index} dangerouslySetInnerHTML={{__html:item}}></li>
                                })
                            }
                        </ul>
                    </div>
                )
            }
        }

        ReactDOM.render(<App/>,document.getElementById("app"))
    </script>