第十五步：Home组件

第十五步：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在数组里查找“获胜”的角色对象，然后使用_.without获取不包含“获胜”角色的数组，因为数组只包含两个角色，所以这就是我们需要的，然后使用_.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文档中的解释：

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