123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384 |
- import React, { Component } from 'react';
- import './index.less';
- import { Icon } from 'antd';
- import { Main } from '../../stores/main';
- export default class extends Component {
- constructor(props) {
- super(props);
- this.state = { quant: 50 };
- this.time = 0;
- this.compute(props.value, 50);
- }
- componentWillReceiveProps(nextProps) {
- if (this.props.value !== nextProps.value) {
- this.compute(nextProps.value, this.state.quant || 50);
- }
- }
- compute(value, quant) {
- if (value === this.props.value && quant === this.state.quant) return;
- console.log(quant);
- this.time += 1;
- const number = this.time;
- this.setState({ quant });
- Main.getScore(value, quant)
- .then(result => {
- if (number !== this.time) return;
- this.setState({ data: result });
- })
- .catch(() => {
- });
- }
- render() {
- const { value, onChange } = this.props;
- const { data = {} } = this.state;
- return (
- <div className="total-sort">
- <div className="total-sort-num">
- <Icon className="minus" type="minus" onClick={() => {
- onChange(Math.max(value - 10, 200));
- }} />
- <input value={value} />
- <Icon className="plus" type="plus" onClick={() => {
- onChange(Math.min(value + 10, 800));
- }} />
- </div>
- <div className="total-sort-desc">
- 预计全球排名<b>{data.totalRank || 0}th</b>
- </div>
- <div className="total-sort-list">
- <div className="item">
- <div className="sort-num">
- <div className="sort-text">Quant :</div>
- <input value={this.state.quant} />
- <Icon className="up" type="caret-up" onClick={() => {
- this.compute(value, Math.min(this.state.quant + 1, 51));
- }} />
- <Icon className="down" type="caret-down" onClick={() => {
- this.compute(value, Math.max(this.state.quant - 1, 6));
- }} />
- </div>
- <div className="t2">
- 排名<b>{data.quantRank || 0}th</b>
- </div>
- </div>
- <div className="item">
- <div className="sort-num">
- <div className="sort-text">Verbal :</div>
- <input value={data.verbalScore} />
- {/* <Icon className="up" type="caret-up" />
- <Icon className="down" type="caret-down" /> */}
- </div>
- <div className="t2">
- 排名<b>{data.verbalRank || 0}th</b>
- </div>
- </div>
- </div>
- </div>
- );
- }
- }
|