React轻松入门(五)——事件

React

发布自Kindem的博客,欢迎大家转载,但是要注意注明出处

在上一节中,我们介绍了React组件的两大灵魂——props和state,这一节中,我们将学习React中的事件。

传统JavaScript中的事件

所谓事件,就是当一定条件(比如按键被点击、页面DOM元素的变化)被满足的时候触发的代码。在传统JavaScript中,如果需要添加一个事件,我们通常是先写一个钩子函数,里面写事件的具体代码,然后在相应的标签中绑定钩子函数,就像这样:

<button onclick="showHello()">
    Click Me!
</button>

<script>
    function showHello() {
        alert('Hello!');
    }
</script>

这样,当用户点击那个按钮的时候,就会弹出一个警告框,向用户问好。

React事件

但是在React中,事件就不是这样使用的了,其实原生html和JavaScript的事件绑定是使用字符串而不是真正的函数,很大程度上是因为html标签的属性是只能使用字符串的,但是在React中,属性是借助{}来传递的,而{}里面可以放任何JavaScript表达式、变量等,所以,首先,在React中,事件绑定是传递一个真正的函数而不是字符串。

在React中使用事件,你仍然需要像原生JavaScript一样先定义一个钩子函数,然后将钩子函数绑定到组件上去,就像这样:

class Hello extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            'show': false
        };

        this.showHello = this.showHello.bind(this);
    }

    showHello() {
        this.setState({
            'show': true
        });
    }

    render() {
        return (
            <div>
                <button onClick={this.showHello}>
                    Click Me!
                </button>
                {this.state.show ? (<h1>Hello!</h1>):('')}
            </div>
        );
    }
}

显而易见,showHello则是我们定义的钩子函数,下面的render部分中的button则是事件的触发者。这里需要注意的地方是在React组件中设定事件钩子函数的时候,需要在构造中使用

this.funtioncName = this.functionName.bind(this);

这句话的意思是将钩子函数中的this绑定到外部的this,如果你不这样做,钩子函数中的this将会指代钩子函数本身而不是组件类。

当然这一问题还有更简单的解决办法,不知道大家还记不记得以前讲ES6中提到的新特性——箭头函数,箭头函数的优点是匿名、this指代外部this,这样的特性不就是为了做事件响应而生的吗?于是你可以简单地这样写:

class Hello extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            'show': false
        };
    }

    render() {
        return (
            <div>
                <button onClick={() => {
                    this.setState({
                        'show': true
                    });
                }}>
                    Click Me!
                </button>
                {this.state.show ? (<h1>Hello!</h1>):('')}
            </div>
        );
    }
}

向事件钩子函数传递参数

如果需要向事件钩子函数传递参数,做法将会有一点特殊,先举个例子再详细讲解:

class Hello extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            'show': false,
            'name': ''
        };
    }

    showName = (name, e) => {
        this.setState({
            'show': true,
            'name': name
        });
    };

    render() {
        return (
            <div>
                <button onClick={(e) => this.showName('Kindem', e)}>
                    Kindem
                </button>
                <button onClick={(e) => this.showName('Dasy', e)}>
                    Dasy
                </button>
                {this.state.show ? (<h1>Hello! {this.state.name}</h1>):('')}
            </div>
        );
    }
}

这一个组件的功能是提供两个按钮,两个按钮对应两个人名,当一个按钮被按下的时候,下方自动弹出一行字向该人问好。这里可以看见我们的钩子处理函数showName就像一个正常的钩子函数一样,只不过多带了参数,但是在下方render中绑定钩子函数的时候却有些不同了。

这是因为onClick默认只会像负责处理的钩子函数传递一个参数e,这个参数e是W3C规定的合成事件,里面提供了一系列方便事件处理的功能,但是我们需要向我们自定义的钩子处理函数传递多个参数,我们的做法是使用一个钩子函数接受e参数,然后再在这个钩子函数中调用我们自定义的带参钩子函数。这样就完成了参数的传递。

这一节的React轻松入门到这里就结束了,如果觉得本文有帮助,可以关注我,我会为大家持续分享IT干货,谢谢!