P09:React实例-老板我要加个服务

目录
文章目录隐藏
  1. 让列表数据化
  2. 增加服务选项
  3. 解决 key 值错误

有了上节课的基础,这节课终于可以添加服务,为所欲为了,随意增加你想要的服务了。这节课我们就来增加一个躺式采耳服务,体验一把帝王级待遇。

让列表数据化

现在的列表还是写死的两个<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 值错误

这个错误的大概意思就是缺少key 值。就是在用 map 循环时,需要设置一个不同的值,这个时 React 的要求。我们可以暂时用index+item的形式来实现。

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

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

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » P09:React实例-老板我要加个服务

发表回复