React搜索框历史搜索记录——数组前插

前言

因为历史记录会从前往后展示，所以要在数组的第一位插入数据

constructor(props) {
        super(props);  //调用父类构造函数

        this.state = {
            history: [],//存储历史
            history_num: 0,//搜索历史的数量
            arr: [],
            num: -1,
            isShow: false,  //搜索历史的显示隐藏
            selectIndex: 0, //被选中的下标 改变颜色
            text: ''//input里的value值
        }
        //直接用state里的值 ： this.state
        //改变state里的值 : this.setState({ })
    }

这是state的内容

刚开始

先去查找如何插入数据

state = {
	xxx: []
}
.........
this.setState({
	xxx: [...this.state.xxx,要添加的元素]
})

后来

可以引用 js 给数组的第一个位置插入数据的函数 unshift

<input type="text" onKeyUp={(e) => this.add(e)}></input>
const data = [...this.state.history];
data.unshift(this.state.text);
this.setState({history : data})

即可实现