简单易懂的React魔法(09):用JSX处理事件:onClic

2017-08-17 本文已影响22人誅诺

onClick事件大家都很熟悉，当用户点击一个特定元素时调用特定的代码。在react中也能使用这个，但是语法有点不同。为了练习这个功能，我们需要添加一个按钮，每次点击时显示一个不同的随机名称和国家。
因为javascript的一些历史性原因，在react/es6中有三种调用方式，前两个我们用的最多。这是一个简单的例子：

src/pages/Detail.js

class Detail extends React.Component {
    buttonClicked() {
        console.log('Button was clicked!')
    }

    render() {
        return (<div>
            <p>Hello, {chance.first()}.</p>
            <p>You're from {chance.country({ full: true })}.</p>
            <button onClick={this.buttonClicked}>Meet Someone New</button>
        </div>);
    }
}

export default Detail;

我们在这里新接触到三种用法:

JSX的button元素和HTML元素相同。
onClick={this.buttonClicked}是你给JSX元素绑定事件的方法。你不应该给方法后面加括号，就像你在写HTML时那样，这样做会让代码直接被调用。
有一个 buttonClicked() 方法来在浏览器控制台打印一句话，使用了this，表示这是这个组件的方法。

保存代码并试着点击这个按钮，你应该会看到点击一次控制台输出一句话。当事件发生时，这是第一个调用的方法，到这里应该很简单。
第二种方法会涉及javascript的一些特性，我们不想只是输出到控制台，我们想重新渲染这个组件，以便呈现随机的名字和地址。React组件有一个特殊的方法专门为这种需求打造。被称为forceUpdate().你可能会觉得要这样写:

<button onClick={this.forceUpdate}>Meet Someone New</button>

很可惜，这样不管用。因为javascript搞不清楚this的意思所以它不会起作用。好吧，javascript不会搞不清楚，这是我们人类搞不清楚。当render方法被调用的时候可以知道this指代Detail组件的实例，可是forceUpdate()方法中的代码不知道this是什么，这就是出错的原因。

是的，这是混乱的。是的，这是让人不爽的。是的，你被卡住了。还好有个简单的方法，一个简单的方法：bind()。它让你强制javascript在被调用时用你制定的this。也就是说，你给javascript说：“当你看到this，我指的是X，不是你自己想当然认为的什么东西。”
把bind()放在要调用的方法名称后，然后确定你将现在this指向的值传进去。不要担心这会不会造成困惑，这是javascript的问题，不是你的问题。

为了一劳永逸的解决这个问题，我们需要在调用buttonClicked()的时后bind(this)。之后我们就能安全的通过buttonClicked()调用forceUpdate()。下面是我们的代码：
src/pages/Detail.js

<button onClick={this.buttonClicked.bind(this)}>Meet Someone New</button>

下面是我们新的buttonClicked()方法：

buttonClicked() {
    this.forceUpdate();
}

保存更改然后试着点击按钮。简单吧？
在我们继续之前最后一件事，需要特别提醒。

注意！注意！注意！

你别不小心写成这样了：

<button onClick={this.buttonClicked(this)}>Meet Someone New</button>

别忘记bind，很多人会犯这个错误，你可能迟早也要犯，我来简单说一下这会有什么后果。（我怎么没犯过）。
如果你写onClick={this.buttonClicked(this)} 写这些代码会在页面被加载时调用，不是当点击事件发生时。因为这个方法调用了forceUpdate()所以页面会重绘，所以buttonClicked又被调用，形成死循环。
所以，如果一个事件被触发，你需要在方法里使用this，就需要使用bind()来保证this的指向不被混淆，同时保证代码不会在被加载时调用。

译者注：在使用es6语法时，我们可以使用箭头函数来解决这个问题，或者在render的开头声明 const that=this，后面所有的this.buttonClicked都改为that.buttonClicked.

简单易懂的React魔法(09):用JSX处理事件:onClic

猜你喜欢

热点阅读