简单易懂的React魔法(20):重构我们的state代码:在onClick中传参数

下一个该重构的是和showCommits()，showForks()和showPulls()他们都是用来更改状态的，所以应该被重构为一个。
是的，很容易。同时也让我有机会想你展示两种不同的传递数据的方法。现在我们都用的是onClick={this.someMethod}或者onClick={this.someMethod.bind(this)}没办法传递参数。根据点击的不同按钮，我们希望传递‘commit’，‘forks’和‘pulls’作为参数。修改render()代码如下：

src/pages/Detail.js

return (

    Show Commits
    Show Forks
    Show Pulls
    {content}
);

这样三个按钮调用同一个函数，selectMode()，下面给出这个方法:
src/pages/Detail.js

selectMode(mode) {
    this.setState({ mode });
}

注意:你不需要在这里使用新的ES6计算属性名语法，因为你是中可以使用变量做为值，键和值是一样的，我们只需要写个mode。

有了selectMode()，就可以删掉showCommits()，showForks()，和showPulls().
代码可以用，而且工作的很好。但我们可以稍微重构一点，我会把写法写出来，因为这是在生产中经常用到的方法，而不是因为这是我个人的偏好。有两种实现同一需求的办法，两个阵营的人都觉得自己的那一条才是正道，但我还是想说，实用才是王道。

提示:给你看看另一种传递参数的方法，你就看看，别改上面的。

另一种方式我们写onClick不传递参数，然后把mode存在data-mode中，如果要用 render是这样的：

return (

    
        Show Commits
    

    
        Show Forks
    

    
        Show Pulls
    

    {content}
);

(注意：我把button标签分了几行这样读起来方便，你觉得舒服也可以放在一行)
你可以看到，不再将参数传给selectMode()方法。而是将字符串存在data-mode中。这种方法依赖于JavaScript的特点;当点击事件发生时，会自动传给被调用函数一个事件对象表示发生了什么事情。我们的代码里没用这个，这种方法被忽略了。但是我现在展示的代码使用的是这种方法，selectMode()方法中这样写：

selectMode(event) {
    this.setState({ mode: event.currentTarget.dataset.mode });
}

如你所见，要读取点击任何按钮的data-mode属性，我们读取currentTarget的dataset.mode属性，currentTarget自动会是button标签。

使用两种方法有两个好处。明确的参数传递是你的代码更容易阅读，你可以准确了解正在发生的事情，但从事件中提取数据有利于减少代码重复。再次注意，要务实。

提示:本书后面的代码将依赖于字符串传参，而不是data-mode属性。

现在就重构的差不多了。如果它是我自己的代码，我可能会尝试调和各种渲染方法，但这不该是现在做的，因为你可能已经选择了和我不一样的JSON字段。

再来个练习：你能将render方法从4种减少到几种？