JSX-绑定事件-CFANZ编程社区

JSX 绑定事件

JSX 中绑定事件必须使用驼峰命名

<button onClick={this.btnClick}>按钮</button>

事件监听方法中的 this, 默认情况下 React 在调用事件监听方法的时候, 是通过 apply 来调用的, 并且在调用的时候将监听方法中的 this 修改为了 undefined, 所以默认情况下我们是无法在监听方法中使用 this 的：

JSX-绑定事件_React

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../react17/react.development.v17.js"></script>
    <script src="../react17/react-dom.development.v17.js"></script>
    <script src="../react17/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
    class Home extends React.Component {
        constructor() {
            super();
            this.state = {}
        }

        render() {
            return (
                <div>
                    <button onClick={this.btnClick}>我是按钮</button>
                </div>
            )
        }

        btnClick() {
            console.log(this);
        }
    }

    ReactDOM.render(<Home/>, document.getElementById('app'));
</script>
</body>
</html>

JSX-绑定事件_事件监听_02

如何解决监听方法中 this 默认是 undefined 的问题。

监听方法 this 处理

箭头函数
创建时通过bind 修改
注册时通过bind 修改
普通函数和箭头函数结合

官方文档：https://zh-hans.reactjs.org/docs/handling-events.html

通过箭头函数

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../react17/react.development.v17.js"></script>
    <script src="../react17/react-dom.development.v17.js"></script>
    <script src="../react17/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
    class Home extends React.Component {
        constructor() {
            super();
            this.state = {}
        }

        render() {
            return (
                <div>
                    <button onClick={this.btnClick}>我是按钮</button>
                </div>
            )
        }

        btnClick = () => {
            console.log("BNTang");
        }
    }

    ReactDOM.render(<Home/>, document.getElementById('app'));
</script>
</body>
</html>

JSX-绑定事件_scala_03

通过添加监听方法的时候, 手动通过bind 修改监听方法中的this

render() {
    return (
        <div>
            <button onClick={this.btnClick.bind(this)}>我是按钮</button>
        </div>
    )
}

通过在构造函数中, 手动通过bind 修改监听方法中的this

<script type="text/babel">
    class Home extends React.Component {
        constructor() {
            super();
            this.state = {}
            this.btnClick = this.btnClick.bind(this);
        }

        render() {
            return (
                <div>
                    <button onClick={this.btnClick}>我是按钮</button>
                </div>
            )
        }

        btnClick() {
            console.log(this);
        }
    }

    ReactDOM.render(<Home/>, document.getElementById('app'));
</script>

手动绑定一个箭头函数, 然后再箭头函数的函数体中手动调用监听方法

render() {
    return (
        <div>
            <button onClick={() => {
                this.btnClick()
            }}>
                我是按钮
            </button>
        </div>
    )
}

因为箭头函数中的 this, 就是当前的实例对象, 因为监听方法并不是 React 调用的, 而是我们在箭头函数中手动调用的, 因为普通的方法, 默认情况下谁调用 this 就是谁。

企业开发推荐方案

普通函数和箭头函数结合