1.渲染服务列表

现在的列表是写死的两个li标签,倘若我们需要将其变成动态的,那我们就需要把这个列表进行数据化,然后通过js代码循环到页面上。

constructor(props){
    super(props) //调用父类的构造函数,固定写法
    this.state={
        inputValue:'' , 
        //----------主要 代码--------start
        list:['推拿','敲背']   
        //----------主要 代码--------end
    }
}

然后我们进行页面数据渲染。

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>
    )
}

2.增加服务选项

我们先给button按钮绑定一个addList方法

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

addList代码如下:

//增加服务的按钮响应方法
addList(){
  this.setState({
    list:[...this.state.list,this.state.inputVal] //扩展运算符
    //把list数组进行了分解,形成了新的数组,然后再进行组合。
  })
}

3.解决key值错误问题

F12打开浏览器控制台,看见报错,意思是缺少key值。在用map循环时,需要设置一个不同的值,这是react的要求。我们可以暂时使用index+item代替,防止重复。

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