Реагировать - перезагрузить внешний компонент из приложения - PullRequest
Новая
       40

Реагировать - перезагрузить внешний компонент из приложения

0 голосов
/ 02 декабря 2018

Я все еще новичок в React.

Я играю в угадайку.При загрузке страницы все загружается правильно (по крайней мере, в Chrome и Safari).Кнопкам кота назначается случайное число, и при нажатии они отправляют соответствующее значение в игровую логику.Когда целевой номер достигнут или превышен, целевой номер сбрасывается.

Это то, что я хочу, но я также хочу, чтобы кнопки получали новые значения.Я хочу, чтобы компонент «Кнопки» перезагрузился и назначил кнопкам новые значения.Я пытался использовать методы обновления, найденные здесь: https://reactjs.org/docs/react-component.html#updating. Я не знаю, что делать дальше.

App.js 

import React, { Component } from 'react';
import './App.css';
import Buttons from "./components/Buttons/Buttons";

class App extends Component {

  targetNumber = (min, max) => {
    const targetNum = Math.floor(Math.random()*(max-min+1)+min);
    console.log(`Target number = ${targetNum}`);

    return targetNum
  };

  state = {
    targetNumber: this.targetNumber(19, 120),
    currentValue: 0,
    gamesWon: 0,
  };

  handleClick = (event) => {
      event.preventDefault();
      const currentValue = this.state.currentValue;
      const newValue = parseInt(event.target.getAttribute("value"));
        this.setState(
            {currentValue: currentValue + newValue}
        )
        // console.log(newValue);
    }

  componentDidUpdate() {
    if (this.state.currentValue === this.state.targetNumber) {
      this.setState(
          {
            targetNumber: this.targetNumber(19, 120),
            currentValue: 0,
            gamesWon: this.state.gamesWon + 1
          }
      )
    }
    else {
        if (this.state.currentValue >= this.state.targetNumber) {
            this.setState(
                {
                  targetNumber: this.targetNumber(19, 120),
                  currentValue: 0,
                  gamesWon: this.state.gamesWon,
                }
            );
        }
    }
  }

  render() {
    return (

      <div className="App">

        <img src={require("./images/frame.png")} alt="frame" id="instructFrame" />

        <div className="resultsDiv">

          <div className="targetNumber">
            Target number = {this.state.targetNumber}
          </div>

          <div className="currentValue">
              Current value = {this.state.currentValue}
          </div>

          <div className="gamesWon">
              Games won = {this.state.gamesWon}
          </div>

        </div>

        <div className="buttonGrid">
            <Buttons 
              onClick={this.handleClick} 
            />
        </div>

      </div>
    );
  }
}

export default App;

Buttons.js 

import React, { Component } from "react";
import Button from "../Button/Button";
import black from "../Button/images/black_cat.png";
import brown from "../Button/images/brown_cat.png";
import gray from "../Button/images/gray_cat.png";
import yellow from "../Button/images/yellow_cat.png";


class Buttons extends Component {

    generateNumber = (min, max) => {
        const rndNumBtn = Math.floor(Math.random()*(max-min+1)+min);
        console.log(rndNumBtn);
        return rndNumBtn
      };

     state = {
        buttons: [
            {
                id: "black",
                src: black,
                alt: "blackBtn",
                value: this.generateNumber(1, 12)
            },
            {
                id: "brown",
                src: brown,
                alt: "brownBtn",
                value: this.generateNumber(1, 12)
            },
            {
                id: "gray",
                src: gray,
                alt: "grayBtn",
                value: this.generateNumber(1, 12)
            },
            {
                id: "yellow",
                src: yellow,
                alt: "yellowBtn",
                value: this.generateNumber(1, 12)
            }
        ]
    };

    render() {
        return (
            <div>

                {this.state.buttons.map(button => {
                    return (
                        <Button
                          className={button.id}
                          key={button.id}
                          src={button.src}
                          alt={button.alt}
                          value={button.value}
                          onClick={this.props.onClick.bind(this)}
                        />
                    )
                })}

            </div>
        )
    }
}

export default Buttons;

Вот репозиторий GitHub.https://github.com/irene-rojas/numberguess-react

1 Ответ

0 голосов
/ 02 декабря 2018

Вы можете добавить key к компоненту Button, ссылающемуся на переменную targetNumber.Таким образом, React будет повторно отображать Button всякий раз, когда targetNumber изменяется.

<div className="buttonGrid">
   <Buttons 
     key={this.state.targetNumber}         
     onClick={this.handleClick} 
   />
</div>
...