Question

我是新来的反应者。我想用reactjs编写一个游戏。我有个问题。单击该按钮时，我调用函数priest并返回另外4个按钮，但它们似乎没有出现。我的功能是

 usePriest = (evt) => {
            return(
              <div>
              <button className="button_player1">heyo</button>
              <button className= "button_player2">heyo</button>
              <button className= "button_player3">heyo</button>
              <button className = "button_player4">heyo</button>
              </div>
              )
          }

我在这里叫它

    else if (mycards0==="/static/media/priest.ae71698d.jpg") {
          return ( 
<div>
            <button className="button_card1_use" onClick={(evt) => this.usePriest(evt)}>Use</button>
            <button className="button_card1_discard">Discard</button>
            <div className="about1"><p>Priest</p>
            Player is allowed to see another player's hand.     
           </div>
</div>

单击use时如何返回4个按钮？

Answer 1

首先，声明一个状态

const [showButton, setShowButton] = useState(false);

然后在您的代码中使用此标记

<div>
    {showButton && (
      <div>
        <button className="button_player1">heyo</button>
        <button className="button_player2">heyo</button>
        <button className="button_player3">heyo</button>
        <button className="button_player4">heyo</button>
      </div>
    )}
    <button className="button_card1_use" onClick={evt => usePriest(evt)}>
      Use
    </button>
    <button className="button_card1_discard">Discard</button>
    <div className="about1">
      <p>Priest</p>
      Player is allowed to see another player's hand.
    </div>
</div>

现在在您的usePriest函数中执行

const usePriest = evt => {
    setShowButton(true);
  };

因此，每当showButton为true时，这三个按钮就会出现

单击按钮时做出反应，返回许多其他按钮

1 个答案: