sourcecode/front/project/www/routes/textbook/topicDetail/page.js

import React from 'react';
import './index.less';
import Assets from '@src/components/Assets';
import Page from '@src/containers/Page';
import Footer from '../../../components/Footer';
import { Contact } from '../../../components/Other';
import Select from '../../../components/Select';
import Modal from '../../../components/Modal';
import { Button } from '../../../components/Button';

export default class extends Page {
  constructor(props) {
    super(props);
    this.state = { open: false, showTip: true };
    this.keyMap = {};
    window.onkeydown = this.onKeydown.bind(this);
    window.onkeyup = this.onKeyup.bind(this);
  }

  onKeydown(e) {
    let active = false;
    if (this.keyMap[e.keyCode]) return false;
    switch (e.keyCode) {
      case 32:
        active = true;
        break;
      case 37:
        active = true;
        break;
      case 39:
        active = true;
        break;
      default:
        break;
    }
    if (active) {
      this.keyMap[e.keyCode] = true;
      return false;
    }
    return true;
  }

  onKeyup(e) {
    let active = false;
    switch (e.keyCode) {
      case 32:
        active = true;
        this.onOpen();
        break;
      case 37:
        active = true;
        this.onPrev();
        break;
      case 39:
        active = true;
        this.onNext();
        break;
      default:
        break;
    }
    if (active) {
      this.keyMap[e.keyCode] = false;
      return false;
    }
    return true;
  }

  onOpen() {
    this.setState({ open: !this.state.open });
  }

  onNext() {}

  onPrev() {}

  renderView() {
    const { showTip } = this.state;
    return (
      <div>
        <div className="top content t-8">
          机经 > 本期机经 > <span className="t-1">逻辑</span>
          <Select className="f-r m-t-1" size="small" theme="white" value={'1'} list={[{ title: '123', key: '1' }]} />
        </div>
        <div className="center content">
          <div className="t-1 t-s-18 m-b-1">【逻辑】0515 起逻辑机经整理</div>
          {this.renderDetail()}
          <Assets className="prev" name="footer_previous_highlight_1" onClick={() => this.onPrev()} />
          <Assets className="next" name="footer_next_highlight_1" onClick={() => this.onNext()} />
        </div>
        <Contact />
        <Footer />
        <Modal
          show={showTip}
          title="提示"
          onConfirm={() => this.setState({ showTip: false })}
          confirmText="好的,知道了"
          btnAlign="center"
        >
          <div className="t-2 t-s-18">敲击键盘← →可翻页；</div>
          <div className="t-2 t-s-18">敲击空格键第一次查看解析，敲击空格键第二次收起解析。</div>
        </Modal>
      </div>
    );
  }

  renderDetail() {
    const { open } = this.state;
    return (
      <div className="detail">
        <div className="m-b-1">
          <span className="t-1 t-s-18 m-r-1">NO.34 题目题目题目</span>
          <span className="t-3 t-s-12">2019-02-21 19:19:20</span>
          <Button radius className="f-r" onClick={() => this.onOpen()}>
            {open ? '收起' : '展开'}解析
          </Button>
        </div>
        <div className="t-2 t-s-16 m-b-2">
          GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
          Assessment）A：GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
          Assessment）GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
          Assessment）A：GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价（Analytical Writing
          Assessment）A：GMAT考试由分析写作、推理、数学和语文四部分组成。分别为： a）分析性写作评价
        </div>
        <div hidden={!open} className="p-20 b-c-3">
          <div className="t t-1 t-s-16 f-w-b m-b-5">官方解析</div>
          <div className="t-1 t-s-16">
            A.By whom they were supposedly named is a passive construction that is unnecessarily indirect and wordy,
            especially immediately following another passive construction; the singular its does not agree with the
            plural antecedent the Glass House Mountains. B.This version of the sentence loses the causal connection,
            failing to explain why James Cook gave the mountains their particular name. C.As the object of a preposition
            and not the subject of the clause, James Cook does not work as the noun that the verbal phrase beginning
            with naming can describe; the preposition since loses the important causal logic of the sentence. D.Correct.
            This concise sentence uses active- voice construction in the relative clause and maintains agreement between
            the pronoun their and its antecedent. E The pronoun it does not agree with the plural Mountains and the
            following pronoun their.
          </div>
        </div>
      </div>
    );
  }
}