在react中循环渲染数据、添加点击事件

---

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)
    }