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>
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!