react绑定事件处理函数this

别等时光非礼了梦想. 提交于 2020-03-10 19:42:48
import React from 'react';
class Home extends React.Component {
    constructor() {
        super()
        this.state = {
            userInfo: '张三',
            userAge: 30,
            list: [
                { title: "张三12 " },
                { title: "张三123 " },
                { title: "张三1234 " },
                { title: "张三12345 " }
            ],
        }
    }
    run() {
        alert(1)
    }
    run1() {
        alert(this.state.userInfo)
    }
    run2 = () => {
        alert(this.state.userAge)
    }
    render() {
        let listResult = this.state.list.map((value, key) => {
            return <li key={key}>{value.title}</li>
        })
        return (
            <div>
                <p>{this.state.userInfo}</p>
                <ul>
                    {listResult}
                </ul>
                <button onClick={this.run}>点击</button>
                <button onClick={this.run1.bind(this)}>改变this指向</button>
                <button onClick={this.run2}>箭头函数改变this指向</button>
            </div>
        )
    }
}
export default Home;

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!