社区微信群开通啦,扫一扫抢先加入社区官方微信群
社区微信群
初始化页面
数组
的形式展现数据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>
- 实现增加
添加数据
,来改变显示回车键
进行增加<input type="text" onKeyUp={this.add} />
add = (e) => {
if (e.keyCode === 13) {
this.setState({
list: [e.target.value, ...this.state.list]
})
e.target.value = ""
}
结果展示:
- 删除
splice(0,1)
实现删除filter(()=>{})
过滤 实现删除索引
<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
})
})
}
效果图:
- 修改
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
})
}
}
效果图:
- 查询
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>
如果觉得我的文章对您有用,请随意打赏。你的支持将鼓励我继续创作!