react学习之旅二：小姐姐服务菜单样例

跟随技术胖学习：https://jspang.com/detailed?id=46#toc227

创建React项目

在你的想要创建项目的路径下新建一个文件夹。Win+R打开终端，进入该文件夹，使用如下命令创建一个新的React项目，项目名为demo01。

create-react-app demo01

创建完成后进入项目目录进行预览，如果能正常打开，说明项目创建成功。

cd demo01  //进入项目目录
npm start  //启动项目

创建小姐姐服务菜单

小姐姐服务菜单实现效果：

在输入框中输入值并点击“增加服务”按钮，能够添加服务；

点击服务列表中的某项服务，可以删除该服务项目。

一、创建Xiaojiejie组件

在项目的src文件夹下新建Xiaojiejie.js文件，填入以下内容：

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

class Xiaojiejie extends Component{
    render(){
        return (
            <Fragment>    {/*Fragment不显示 */}
                <div>
                    <input />
                    <button>增加服务</button>
                </div>
                <ul>
                    <li>头部按摩</li>
                    <li>精油推背</li>
                </ul>
            </Fragment>
        )
    }
}

export default Xiaojiejie; //暴露Xiaojiejie组件，让外部能够进行引用

修改index.js文件，替换App组件为Xiaojiejie组件：

在终端输入npm start，启动项目：

二、添加服务

React以数据为驱动改变页面，不直接对Dom进行操作，用户关注页面变化即可。

Xiaojiejie组件数据初始化，建立constructor方法如下：

class Xiaojiejie extends Component{
    constructor(props){
        super(props);
        this.state = {
            inputValue: '',  //输入值
            list:['基础按摩','精油推背']  //服务列表
        }
    }

    render(){
        return (
         ...
        )
    }
}

进行添加服务功能的数据以及事件绑定：

class Xiaojiejie extends Component{
    constructor(props){
        ...
    }

    render(){
        return (
            <Fragment>    {/*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+item}>{item}</li>
                            // key = {index}非常容易重复
                        })
                    }
                </ul>
            </Fragment>
        )
    }

    inputChange(e){
        this.setState({
            inputValue:e.target.value
        })
    }

    addList(){
        this.setState({
            list:[...this.state.list,this.state.inputValue], 
            //...表示扩展运算符
            //相当于['基础按摩','精油推背',this.state.inputValue]
            inputValue:''
        })
    }
}

启动项目，添加服务成功：

三、删除服务

为li绑定删除事件：

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

deleteItem方法如下：

deleteItem(index){
        //不可以直接操作this.state.list，需要引入一个局部变量
        let list = this.state.list;
        list.splice(index,1);
        this.setState({
            list:list
        })
    }

启动项目，删除服务成功：