1、循环
假设现在我们有一个这样的数组:list: ['张三','李四','王五']
,那么怎么在页面上渲染呢,很简单,在react中可以用数组的map方法
import React from 'react'
class TodoList extends React.Component {
constructor(props){
super(props)
this.state = {
list: ['张三','李四','王五'],
}
}
render() {
return (
<div>
<ul>
{/* 循环数据 */}
{
this.state.list.map((item,index) => {
// 传入index
return <li key={index}>{item}</li>
})
}
</ul>
</div>
)
}
}
export default TodoList
上面的代码我们还能优化一下,项目当中,列表的数据都是从后台获取了,这里我们何不封装成一个方法进行渲染呢,也符合react函数式编程
import React from 'react'
class TodoList extends React.Component {
constructor(props){
super(props)
this.state = {
list: ['张三','李四','王五'],
}
}
getTodoList(){
return (
this.state.list.map((item,index) => {
return <li key={index}>{item}</li>
})
)
}
render() {
return (
<div>
<ul>
{/* 循环数据 */}
{ this.getTodoList() }
//我们也可以直接这样渲染,不过不推荐
{ this.state.list }
</ul>
</div>
)
}
}
2、添加点击事件
想要获取我点击的li里面的数据怎么搞呢,现在就要给这个元素添加点击事件了,react中有自己的语法规范,添加点击事件是这样的:onClick={ this.xxxxx }
import React from 'react'
class TodoList extends React.Component {
constructor(props){
super(props)
this.state = {
list: ['张三','李四','王五']
}
//在这里对this指向进行赋值,就不用再定义方法中写bind(this)了,比较推荐,也可以在jsx中加入`bind(this)`,就能获取到this了
this.btnClick = this.btnClick.bind(this)
}
//点击事件
btnClick(){
//这里面的this其实指向的是button按钮,可以改变this的指向,在button的点击事件中:
}
//箭头函数用法
btnClick = () => {
//do something
}
render() {
return (
<div className="main-container">
<ul>
{/* 循环数据 */}
{
this.state.list.map((item,index) => {
// 传入index
return <li key={index} onClick={this.btnClick(index)}>{item}</li>
//或者,这里bind的作用是修改this指向,让函数内部的this指向bind参数中的第一个参数
return <li key={index} onClick={this.btnClick.bind(this,index)}>{item}</li>
//更推荐使用箭头函数
return <li key={index} onClick={() => this.btnClick(index)}>{item}</li>
})
}
</ul>
</div>
)
}
}
export default TodoList
js中bind、call、apply
都能改变this指向,区别就是bind不会立即调用,而call、apply会立即调用前面的那个函数
bind的第一个参数用来修改this指向,后面所有的参数都会用来当作调用前面函数时候的参数传递进去
<input type="button" value="点我一下" onClick={this.clickMe.bind(this,'我的天','哈哈哈','你是谁')} />
clickMe(arg1,arg2){
console.log(arg1,arg2)
}