第十五步：Home組件 · 使用React、Node.js、MongoDB、Socket.IO開發一個角色投票應用

## 第十五步：Home組件這是一個稍微簡單些的組件，它唯一的職責就是顯示兩張圖片并且處理點擊事件，用于告知哪個角色勝出。 ### 組件在components目錄下新建文件*Home.js*： ~~~ import React from 'react'; import {Link} from 'react-router'; import HomeStore from '../stores/HomeStore' import HomeActions from '../actions/HomeActions'; import {first, without, findWhere} from 'underscore'; class Home extends React.Component { constructor(props) { super(props); this.state = HomeStore.getState(); this.onChange = this.onChange.bind(this); } componentDidMount() { HomeStore.listen(this.onChange); HomeActions.getTwoCharacters(); } componentWillUnmount() { HomeStore.unlisten(this.onChange); } onChange(state) { this.setState(state); } handleClick(character) { var winner = character.characterId; var loser = first(without(this.state.characters, findWhere(this.state.characters, { characterId: winner }))).characterId; HomeActions.vote(winner, loser); } render() { var characterNodes = this.state.characters.map((character, index) => { return ( <div key={character.characterId} className={index === 0 ? 'col-xs-6 col-sm-6 col-md-5 col-md-offset-1' : 'col-xs-6 col-sm-6 col-md-5'}> <div className='thumbnail fadeInUp animated'> <img onClick={this.handleClick.bind(this, character)} src={'http://image.eveonline.com/Character/' + character.characterId + '_512.jpg'}/> <div className='caption text-center'> <ul className='list-inline'> <li><strong>Race:</strong> {character.race}</li> <li><strong>Bloodline:</strong> {character.bloodline}</li> </ul> <h4> <Link to={'/characters/' + character.characterId}><strong>{character.name}</strong></Link> </h4> </div> </div> </div> ); }); return ( <div className='container'> <h3 className='text-center'>Click on the portrait. Select your favorite.</h3> <div className='row'> {characterNodes} </div> </div> ); } } export default Home; ~~~ 2015年7月27日更新：修復“Cannot read property ‘characterId’ of undefined”錯誤，我更新了在`handleClick()`方法里獲取“失敗”的Character ID。它使用[`_.findWhere`](http://underscorejs.org/#findWhere)在數組里查找“獲勝”的角色對象，然后使用[`_.without`](http://underscorejs.org/#without)獲取不包含“獲勝”角色的數組，因為數組只包含兩個角色，所以這就是我們需要的，然后使用[`_.first`](http://underscorejs.org/#first)獲取數組第一個元素，也就是我們需要的對象。鑒于角色數組只有兩個元素，其實沒有必要非要使用map方法不可，雖然這也能達到我們的目的。另一種做法是為`characters[0]`和`characters[1]`各自創建標記。 ~~~ render() { return ( <div className='container'> <h3 className='text-center'>Click on the portrait. Select your favorite.</h3> <div className='row'> <div className='col-xs-6 col-sm-6 col-md-5 col-md-offset-1'> <div className='thumbnail fadeInUp animated'> <img onClick={this.handleClick.bind(this, characters[0])} src={'http://image.eveonline.com/Character/' + characters[0].characterId + '_512.jpg'}/> <div className='caption text-center'> <ul className='list-inline'> <li><strong>Race:</strong> {characters[0].race}</li> <li><strong>Bloodline:</strong> {characters[0].bloodline}</li> </ul> <h4> <Link to={'/characters/' + characters[0].characterId}><strong>{characters[0].name}</strong></Link> </h4> </div> </div> </div> <div className='col-xs-6 col-sm-6 col-md-5'> <div className='thumbnail fadeInUp animated'> <img onClick={this.handleClick.bind(this, characters[1])} src={'http://image.eveonline.com/Character/' + characters[1].characterId + '_512.jpg'}/> <div className='caption text-center'> <ul className='list-inline'> <li><strong>Race:</strong> {characters[1].race}</li> <li><strong>Bloodline:</strong> {characters[1].bloodline}</li> </ul> <h4> <Link to={'/characters/' + characters[1].characterId}><strong>{characters[1].name}</strong></Link> </h4> </div> </div> </div> </div> </div> ); } ~~~ 第一張圖片使用Bootstrap中的`col-md-offset-1`位移，所以兩張圖片是完美居中的。注意我們在點擊事件上綁定的不是`this.handleClick`，而是`this.handleClick.bind(this, character)`。簡單的傳遞一個事件對象是不夠的，它不會給我們任何有用的信息，不像文本字段、單選、復選框元素等。 [MSDN文檔](https://msdn.microsoft.com/en-us/library/ff841995%28v=vs.94%29.ASPx?f=255&MSPPError=-2147217396)中的解釋： ~~~ function.bind(thisArg[, arg1[, arg2[, ...]]]) ~~~ * thisARG(必須) – 使用this的一個對象，能在新函數內部指向當前對象的上下文 * arg1, arg2, …?(可選) – 傳遞給新函數的一系列參數簡單的來說，因為我們需要在`handleClick`方法里引用`this.state`，所以需要將`this`上下文傳遞進去。另外我們還傳遞了被點擊的角色對象，而不是當前的event對象。 `handleClick`方法里的`character`參數代表的是獲勝的角色，因為它是被點擊的那一個。因為我們僅有兩個角色需要判斷，所以不難分辨誰是輸的那個。接下來將獲勝和失敗的角色Character ID傳遞給`Character ID`?action。 ### Actions 在actions目錄下新建*HomeActions.js*： ~~~ import alt from '../alt'; class HomeActions { constructor() { this.generateActions( 'getTwoCharactersSuccess', 'getTwoCharactersFail', 'voteFail' ); } getTwoCharacters() { $.ajax({ url: '/api/characters' }) .done(data => { this.actions.getTwoCharactersSuccess(data); }) .fail(jqXhr => { this.actions.getTwoCharactersFail(jqXhr.responseJSON.message); }); } vote(winner, loser) { $.ajax({ type: 'PUT', url: '/api/characters' , data: { winner: winner, loser: loser } }) .done(() => { this.actions.getTwoCharacters(); }) .fail((jqXhr) => { this.actions.voteFail(jqXhr.responseJSON.message); }); } } export default alt.createActions(HomeActions); ~~~ 這里我們不需要`voteSuccess`?action，因為`getTwoCharacters`已經滿足了我們的需求。換句話說，在一次成功的投票之后，我們需要從數據庫獲取兩個新的隨機角色顯示出來。 ### Store 在stores目錄下新建文件*HomeStore.js*： ~~~ import alt from '../alt'; import HomeActions from '../actions/HomeActions'; class HomeStore { constructor() { this.bindActions(HomeActions); this.characters = []; } onGetTwoCharactersSuccess(data) { this.characters = data; } onGetTwoCharactersFail(errorMessage) { toastr.error(errorMessage); } onVoteFail(errorMessage) { toastr.error(errorMessage); } } export default alt.createStore(HomeStore); ~~~ 下一步，讓我們實現剩下的Express路由，來獲取并更新Home組件中的兩個角色、獲得總角色數量等等。