react绑定事件处理函数this

Posted 2021-03-06 yangisme

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;