码迷,mamicode.com
首页 > 其他好文 > 详细

react绑定事件处理函数this

时间:2020-03-10 20:15:11      阅读:73      评论:0      收藏:0      [点我收藏+]

标签:import   extends   onclick   run   extend   ons   list   str   info   

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;

 

react绑定事件处理函数this

标签:import   extends   onclick   run   extend   ons   list   str   info   

原文地址:https://www.cnblogs.com/yangisme/p/12457922.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!