本节主要介绍
React
中列表循环展示数据以及事件的绑定。
1. 列表循环数据化
目前Child.js
组件中的<li>
标签内的数据是静态的,也就是死的。如果要换成动态的。就需要把这个列表进行数据化之后再用JavaScript
代码循环在页面上。
首先,在上一节中。定义过了一个空的list
数组。这节课先把list
数组添加两个数组元素。代码如下:
// 省略上面部分无关代码
constructor(props) {
super(props)
this.state = {
inputValue: 'test',
// --- 主要代码 start ---
list: ['测试文字1', '测试文字2']
// --- 主要代码 end ---
}
}
有了数据之后,可以在利用JSX
部分进行循环输出,代码如下:
// 省略上面部分无关代码
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. 增加数据选项
要增加项目,需要在增加按钮上绑定一个方法this.addItem
(这个方法目前还没有,需要自己建立)
<button onClick = {this.addItem.bind(this)}> 增加 </button>
接下来就是定义增加的方法函数,注意: 写在render()
之外。
addItem() {
this.setState({
list: [...this.state.list, this.state.inputValue],
// 这段代码用于将输入项新增到项目之后情况输入框
inputValue: ''
})
}
上述代码要说的是...
这个属于es6
的扩展运算符,意思就是将list
数组进行分解,和后面的this.state.inputValue
变量组合形成一个新的数组。这种写法更简单和直观。因此比较推荐这样。
另外:之所以不用push
方法是因为:
this.state
里面定义的数据必须通过this.setState
来改变。这个涉及到单向数据流。push
方法返回的是新数组的长度,是数字,而不是新的数组。
3. 解决key
值错误
此时,再返回浏览器打开F12
控制台就会发现有报错。根据报错可以简单看出是Key
值没有设置。Key
的作用涉及到在虚拟DOM
中因为比对而导致的性能问题。因此建议在写循环的时候都加上Key
值。这个现在也是React
的硬性要求。同时,Key
值在该循环中必须是独一无二的。
解决方式如下:
<ul>
{
this.state.list.map((item, index) => {
return <li key = {index + item}>{item}</li>
})
}
</ul>
注:一般开发人员在写Key
值的时候喜欢用index
。这在长久来看对性能是有影响的。很多公司后端接口中会返回一个字段,里面包含的是一个独一无二的值。如果后端没有返回这个字段的话,可以尝试使用上面的方式。index + item
,这样就能尽可能的防止重复。