react 实现简单的增、删、改、查（模糊查询 及 高亮显示查找部分）

初始化页面

• 先画出来一个界面，在这里面进行操作
• 通过数组的形式展现数据
• 通过 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 = ""
    }

结果展示：