008 绑定事件与this

最新推荐文章于 2022-07-26 23:28:37 发布

猴子敲代码

最新推荐文章于 2022-07-26 23:28:37 发布

阅读量96

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/test253506088/article/details/115899185

版权

React 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

React绑定事件使用的小驼峰命名法，在绑定函数的时候不能加()，否则函数会立即执行，不会管你事件是否触发。完整代码见案例文件

先来看bind绑定事件

<body>
    <div id="app"></div>
</body>
<!-- 注意type="text/babel" 否则无法起到babel的翻译功能 -->
<script type="text/babel">
    class MySub extends React.Component {
        /* 如下所有clickFunction方法如果this输出是undefined则绑定是失败的 */
        clickFunction() {
            console.log("触发事件-普通函数-bind绑定" + this);
        };
        clickFunction5 = (value) => {
            console.log("触发事件-匿名函数-bind绑定2，参数：" + value + this);
        };
        render() {
            return (
                <div>
                    {/*使用bind进行绑定，点击后触发clickFunction()方法*/}
                    <button type={"button"} onClick={this.clickFunction.bind(this)}>
                        bind绑定
                    </button>

                    {/*使用bind进行绑定进行传参，点击后触发clickFunction()方法*/}
            <button type={"button"} onClick={this.clickFunction5.bind(this, "hello")}>
                        bind绑定(传参)
                    </button>
                </div>
            );
        };
    };
    ReactDOM.render(<MySub />, document.getElementById("app"));
</script>

使用箭头函数绑定事件

<script type="text/babel">
    class MySub extends React.Component {
        /* 如下所有clickFunction方法如果this输出是undefined则绑定是失败的 */
        clickFunction2 = () => {
            console.log("触发事件-匿名函数-箭头函数绑定" + this);
        };

        clickFunction4 = (value) => {
            console.log("触发事件-匿名函数-箭头函数绑定2，参数：" + value + this);
        };

        clickFunction6 = (value, event) => {
            console.log("触发事件-匿名函数-bind绑定2，参数：" + value + this);
            console.log(event);
        };

        render() {
            return (
                <div>
                    {/*使用箭头函数进行绑定，点击后触发clickFunction2()方法*/}
                    <button type={"button"} onClick={this.clickFunction2}>
                        箭头函数绑定
                    </button>

                    {/*这种写法能带()，能传参，点击后触发clickFunction4()方法*/}
                    <button type={"button"} onClick={() => { this.clickFunction4("hi") }}>
                        箭头函数绑定2(可以传参)
                    </button>

                    {/*这种写法能带()，能传event，点击后触发clickFunction6()方法*/}
      <button type={"button"} onClick={(event) => { this.clickFunction6("hi",event) }}>
                        箭头函数绑定3(传递event)
                    </button>
                </div>
            );
        };
    };
    ReactDOM.render(<MySub />, document.getElementById("app"));
</script>

再来看构造器绑定，这个没啥用，看看就行

<script type="text/babel">
    class MySub extends React.Component {
        constructor(porps) {
            super(porps);
            //在构造函数里绑定事件
            this.clickFunction3 = this.clickFunction3.bind(this);
        };

        clickFunction3 = () => {
            console.log("触发事件-匿名函数-constructor绑定" + this);
        };

        render() {
            return (
                <div>
                    {/*在constructor里绑定，点击后触发clickFunction3()方法*/}
                    <button type={"button"} onClick={this.clickFunction3}>
                        constructor绑定
                    </button>
                </div>
            );
        };
    };
    ReactDOM.render(<MySub />, document.getElementById("app"));
</script>

猴子敲代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
008 绑定事件与this

React绑定事件使用的小驼峰命名法，在绑定函数的时候不能加()，否则函数会立即执行，不会管你事件是否触发。完整代码见案例文件先来看bind绑定事件<body> <div id="app"></div></body><script type="text/babel"> class MySub extends Reac
复制链接

扫一扫

专栏目录