用react做出简易版todoList效果

todoList

---

添加时渲染效果

模糊搜索时渲染效果

以下为实现代码

---

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

<script type="text/babel">

    // App 组件
    class App extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                list: [],
                arr: [], // 放置模糊查找的结果,
                state: true, // true 添加删除修改状态  false 就是模糊查找状态
            }
        }

        // 添加
        add = (e) => {
            if (e.keyCode === 13) { // 向数组里添加一项
                // console.log(e.target.value); // 获取 value 值
                // console.log(this.node.value); // 获取 value 值

                if (this.node.value === '') return; // 文本框为空，不添加

                // this.state.list.push(this.node.value)
                this.setState({
                    list: [this.node.value, ...this.state.list]
                }, () => {
                    this.node.value = ''; // 添加以后清空文本框内容
                })
            }
        };

        // 删除
        remove(index) {

            // confirm() 消息确认框，确认 true,取消 false
            if (confirm('确认要删除吗？')) {
                // 第 1 种删除方法
                // const list = this.state.list.splice(index, 1);
                // this.setState({
                //     list: this.state.list,
                // });

                // 第 2 种删除方法
                this.setState({
                    list: this.state.list.filter((item, idx) => idx !== index),
                })
            }
        }

        // 修改
        modify(index) {
            // prompt() 消息提示框，接收 2 个参数，第 1 个参数：提示框的提示标题，第 2 个参数，提示框默认值
            // 确认返回输入内容，取消返 null
            const newValue = prompt('修改', '请输入修改的内容');
            // console.log(newValue); // 提示框输入的内容
            this.state.list[index] = newValue;

            if (newValue) {
                this.setState({
                    list: this.state.list
                })
            }
        }

        // 模糊查找
        blurFind = () => {
            // 获取查找的关键字
            const keyWord = prompt('查找', '请输入关键字');

            // 实现模糊查找
            // this.setState({
            //     state: false, // 切换到查找的状态
            //     arr: this.state.list.filter((item => item.includes(keyWord))),
            // });

            // 实现模糊查找和高亮
            // 获取查找到的结果
            let result = this.state.list.filter(item => item.indexOf(keyWord) !== -1);

            // 关键字高亮
            result.forEach((item, index, arr) => {
                // arr[index] = "<div>" + item.replace(new RegExp(keyWord, "g"), "<span style='color:red'>" + keyWord + "</span>") + "</div>"
                arr[index] = `<div>${item.replace(new RegExp(keyWord, 'g'), `<span style="color:red">${keyWord}</span>`)}</div>`
            });

            console.log(result);

            this.setState({
                state: false, // 切换到查找的状态
                arr: result,
            });
        };

        list = () => {
            this.setState({
                state: true,
                arr: [],
            })
        };

        render() {
            const {list, arr} = this.state;
            return (
                <div>
                    <input onKeyUp={this.add} ref={node => this.node = node} type="text"/>
                    <button onClick={this.blurFind}>模糊查找</button>
                    <button onClick={this.list} style={
   
   {display: this.state.state ? 'none' : 'inline-block'}}>返回
                    </button>
                    <ul style={
   
   {display: this.state.state ? '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.querySelector('#app'));

</script>