React实例1-列表渲染和按钮添加操作

﹏ヽ暗。殇╰゛Y 2022-12-12 15:30 221阅读 0赞

#### 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方法

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>

个人博客：[Karma’s Blog][Karma_s Blog]  
源码地址：[传送门][Link 1]

[Karma_s Blog]: http://karma520.com/2020/10/08/25%20React%E5%AE%9E%E4%BE%8B1-%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%E5%92%8C%E6%8C%89%E9%92%AE%E6%B7%BB%E5%8A%A0%E6%93%8D%E4%BD%9C/
[Link 1]: https://github.com/kay-520/React_study