## 第十五步: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组件中的两个角色、获得总角色数量等等。