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

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>

个人博客：Karma’s Blog 源码地址：传送门