P09:React实例-老板我要加个服务
有了上节课的基础,这节课终于可以添加服务,为所欲为了,随意增加你想要的服务了。这节课我们就来增加一个躺式采耳服务,体验一把帝王级待遇。
让列表数据化
现在的列表还是写死的两个<li>
标签,那要变成动态显示的,就需要把这个列表先进行数据化,然后再用javascript
代码,循环在页面上。
我们先给上节课的list数组增加两个数组元素,代码如下:
constructor(props){ super(props) //调用父类的构造函数,固定写法 this.state={ inputValue:'mybj' , // 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
,可以清楚的看到报错了。
这个错误的大概意思就是缺少key值
。就是在用map循环时,需要设置一个不同的值,这个时React的要求。我们可以暂时用index+item
的形式来实现。
<ul> { this.state.list.map((item,index)=>{ return <li key={index+item}>{item}</li> }) } </ul>
这样就解决了这个隐患,现在就可以舒服的享受帝王级的服务了。
1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P09:React实例-老板我要加个服务
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » P09:React实例-老板我要加个服务