0
点赞
收藏
分享

微信扫一扫

P09:列表数据化、列表添加数据


React16 基础

  • ​​阐述​​
  • ​​让列表数据化​​
  • ​​增加服务选项​​
  • ​​解决key值错误​​
  • ​​预览​​

阐述

有了上节课的基础,这节课终于可以添加服务,为所欲为了,随意增加你想要的服务了。

这节课我们就来增加一个躺式采耳服务,体验一把帝王级待遇。

让列表数据化

现在的列表还是写死的两个​​<li>​​​标签,那要变成动态显示的,就需要把这个列表先进行数据化,然后再用 ​​javascript​​ 代码,循环在页面上。

我们先给上节课的 ​​list​​ 数组增加两个数组元素代码如下:

constructor(props){
super(props) //调用父类的构造函数,固定写法
this.state={
inputValue:'willem' , // input中的值
//----------主要 代码--------start
list:['基础按摩','精油推背']
//----------主要 代码--------end
}
}

有了数据后,可以在JSX部分进行循环输出,代码如下:

render(){
return (
<Fragment>
<div>
<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
<button> 增加服务 </button>
</div>
<ul>
{
this.state.list.map((item,index)=>{
return <li>{item}</li>
})
}
</ul>
</Fragment>
)
}

完成上面的步骤,数据就不再是固定的了,而是动态管理的,也为我们接下来的添加打下了基础,剩下的步骤也显得很简单了。

增加服务选项

要增加服务选项,我们需要再增加按钮上先绑定一个方法 ​​this.addList(这个方法目前还没有,需要我们接下来建立)​​。

<button onClick={this.addList.bind(this)}> 增加服务 </button>

接下来就写 ​​this.addList​​ 方法,代码如下:

//增加服务的按钮响应方法
addList(){
this.setState({
list:[...this.state.list,this.state.inputValue]
})
}

这里需要说的是​​...​​​这个是ES6的新语法,叫做扩展运算符。
意思就是把 ​​​list​​ 数组进行了分解,形成了新的数组,然后再进行组合。这种写法更简单和直观,所以推荐这种写法。

写完上面的代码,应该就可以实现增加项目了,你可以试着增加一下自己喜欢的服务进去,比如”美女踩背”………

解决key值错误

高兴的同时其实是有一些隐患的,打开浏览器的控制台F12,可以清楚的看到报错了。

P09:列表数据化、列表添加数据_前端


这个错误的大概意思就是缺少 ​​key​​​ 值。就是在用 ​​map​​ 循环时,需要设置一个不同的值,这个时React的要求。

我们可以暂时用 ​​index+item​​的形式来实现。

<ul>
{
this.state.list.map((item,index)=>{
return <li key={index+item}>{item}</li>
})
}
</ul>

这样就解决了这个隐患,现在就可以舒服的享受帝王级的服务了。

预览

P09:列表数据化、列表添加数据_前端_02

P09:列表数据化、列表添加数据_构造函数_03

Beauty.js 组件

import React,{Component,Fragment } from 'react'

class Beauty extends Component{
//js的构造函数,由于其他任何函数执行
constructor(props){
//调用父类的构造函数,固定写法
super(props)
this.state={
inputValue:'' , // input中的值
//----------主要 代码--------start
list:['基础按摩','精油推背']
//----------主要 代码--------end
}
}

render(){
return (
<Fragment>
<div>
<input value={this.state.inputValue} onChange={this.inputChange.bind(this)} />
<button onClick={this.addList.bind(this)}> 增加服务 </button>
</div>
<ul>
{
this.state.list.map((item,index)=>{
return <li key={index}>{index} - {item}</li>
})
}
</ul>
</Fragment>
)
}

inputChange(e){
// console.log(e.target.value);
// this.state.inputValue=e.target.value;
this.setState({
inputValue:e.target.value
})
}

//增加服务的按钮响应方法
addList(){
this.setState({
list:[...this.state.list,this.state.inputValue]
})
}

}

export default Beauty

P09:列表数据化、列表添加数据_构造函数_04


举报

相关推荐

0 条评论