为什么按钮没有被渲染？

Question

我正在研究这个React应用程序：https://github.com/eroepken/jeopardy-js

我不明白为什么显示卡片值的按钮(className={clue-card__value ${valueClass}})在被点击后没有呈现出来。我本以为会有某种状态来保存单击的true/false的值，但事实并非如此。我在CSS中也看不到任何东西。

我遗漏了什么？

import React from 'react';

export default class ClueCard extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      cardText: props.children,
      clueIsShowing: false,
      showAnswerLink: false,
      answerIsShowing: false
    };

    this.showClue = this.showClue.bind(this);
    this.hideClue = this.hideClue.bind(this);
    this.showAnswerLink = this.showAnswerLink.bind(this);
    this.toggleAnswer = this.toggleAnswer.bind(this);
  }

  showClue(e) {
    e.currentTarget.remove();

    this.setState({
      clueIsShowing: true
    });

    setInterval(
      () => this.showAnswerLink(),
      1000
    );
  }

  hideClue() {
    this.setState({
      clueIsShowing: false
    });
  }

  showAnswerLink() {
    this.setState({
      showAnswerLink: true
    });
  }

  toggleAnswer() {
    if (!this.state.answerIsShowing) {
      this.setState({
        cardText: this.props.answer
      });
    } else {
      this.setState({
        cardText: this.props.children
      });
    }

    this.setState({
      answerIsShowing: !this.state.answerIsShowing
    });
  }

  render() {
    let valueClass = 'large';
    if(this.props.value.length === 4) {
      valueClass = 'medium';
    }

    let textClass = 'small';
    if(this.state.cardText.length < 20) {
      textClass = 'large';
    }

    return (
      <div className="clue-card">
        <button className={`clue-card__value ${valueClass}`} onClick={this.showClue}><span className="dollar-sign">$</span>{this.props.value}</button>
        <div className={`clue-card__inner ${textClass} ${this.state.clueIsShowing ? 'show' : 'hidden'}`}>
          <div className="clue-card__inner-wrapper">
            <div className="clue-card__clue">{this.state.cardText}</div>
            <button className={`clue-card__answer-link ${this.state.showAnswerLink ? '' : 'hidden'}`} onClick={this.toggleAnswer}>Toggle Answer</button>
            <button className={`clue-card__close-link ${this.state.showAnswerLink ? '' : 'hidden'}`} onClick={this.hideClue}>Close</button>
          </div>
        </div>
      </div>
    );
  }
}

如果您查看下面的屏幕截图，您可以看到按钮是为第一个线索呈现的，但不是为第二个线索呈现的。这是预期的/所需的功能。我就是不明白为什么按钮不是为已经点击的第二条线索呈现的。如果我看一下代码，我希望按钮总是呈现出来。

​

Answer 1

删除此命令：

e.currentTarget.remove();

这行代码将删除您的目标元素。