React: передача данных с одного маршрута на другой - PullRequest
Новая
       63

React: передача данных с одного маршрута на другой

0 голосов
/ 06 августа 2020

Я пытаюсь передать данные из переменной const currentMinutesState (из дочернего компонента Settings) в счетчик минут (в другой дочерний компонент TimerScreen).

Вот код:

Приложение. js

import React from "react";
import "./App.css";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Settings from "./pages/Settings";
import TimerScreen from "./pages/TimerScreen";
import PauseScreen from "./pages/PauseScreen";

class App extends React.Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path="/TimerScreen">
            <TimerScreen />
          </Route>

          <Route path="/PauseScreen">
            <PauseScreen />
          </Route>

          <Route path="/">
            <Settings />
          </Route>
        </Switch>
      </Router>
    );
  }
}
export default App;

Настройки. js

import React from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Logo from "../images/logo.png";
import Plus from "../images/plus.png";
import Minus from "../images/minus.png";
import Timer from "../images/timer.png";
import TimerScreen from "./TimerScreen";

class Settings extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      trainingTimeMinutes: "00",
      trainingTimeSeconds: "00",
      breakTimeMinutes: "00",
      breakTimeSeconds: "00",
      repetitions: 0,
      sound: false,
      // fontOpacity: 0.4,
    };
    this.setTrainingTimeMinutes = this.setTrainingTimeMinutes.bind(this);
    this.setTrainingTimeSeconds = this.setTrainingTimeSeconds.bind(this);
    this.setBreakTimeMinutes = this.setBreakTimeMinutes.bind(this);
    this.setBreakTimeSeconds = this.setBreakTimeSeconds.bind(this);
    this.setRepetitions = this.setRepetitions.bind(this);
  }

  setTrainingTimeMinutes(event) {
    const trainingTimeMinutes = String(
      parseInt(event.target.value, 10)
    ).padStart(2, "0");

    this.setState({ trainingTimeMinutes });

    const currentMinutesState = { trainingTimeMinutes };
    console.log(currentMinutesState);
    // <div>      <TimerScreen currentMinutesState/></div>
  }

  setTrainingTimeSeconds(event) {
    const trainingTimeSeconds = String(
      parseInt(event.target.value, 10)
    ).padStart(2, "0");
    this.setState({ trainingTimeSeconds });
  }

  setBreakTimeMinutes(event) {
    const breakTimeMinutes = String(parseInt(event.target.value, 10)).padStart(
      2,
      "0"
    );
    this.setState({ breakTimeMinutes });
  }

  setBreakTimeSeconds(event) {
    const breakTimeSeconds = String(parseInt(event.target.value, 10)).padStart(
      2,
      "0"
    );
    this.setState({ breakTimeSeconds: parseInt(event.target.value) });
  }

  setRepetitions(event) {
    this.setState({ repetitions: parseInt(event.target.value) });
  }
  render() {
    return (
      <div className="mainDiv" style={{ backgroundImage: Logo }}>
        <div id="header">
          <img id="timerImg" src={Timer} alt="timer symbol" />
          &nbsp; &nbsp;Interval Training Timer&nbsp;&nbsp;
          <img id="timerImg" src={Timer} alt="timer symbol" />
        </div>

        <hr className="horzLine" />

        <label id="trainingTimeLabel"> TRAININGS TIME</label>

        <div className="timerCells">
          <img id="minusImgTT" src={Minus} alt="minus symbol" />

          <div className="innerTimerCells">
            <input
              type="number"
              className="inputCell"
              maxLength="2"
              value={this.state.trainingTimeMinutes}
              onChange={this.setTrainingTimeMinutes}
            />
            <div className="semicolon">:</div>
            <input
              type="number"
              className="inputCell"
              maxLength="2"
              value={this.state.trainingTimeSeconds}
              onChange={this.setTrainingTimeSeconds}
            />
          </div>

          <img id="plusImgTT" src={Plus} alt="plus symbol" />
        </div>
        <br />

        <label> BREAK</label>

        <div className="timerCells">
          <img id="minusImgTT" src={Minus} alt="minus symbol" />

          <div className="innerTimerCells">
            <input
              type="number"
              className="inputCell"
              value={this.state.breakTimeMinutes}
              onChange={this.setBreakTimeMinutes}
            />
            <div className="semicolon">:</div>
            <input
              type="number"
              className="inputCell"
              value={this.state.breakTimeSeconds}
              onChange={this.setBreakTimeSeconds}
            />
          </div>

          <img id="plusImgTT" src={Plus} alt="plus symbol" />
        </div>

        <br />

        <label> REPETITIONS</label>

        <div className="timerCells">
          <img id="minusImgTT" src={Minus} alt="minus symbol" />

          <div className="innerTimerCells">
            <input
              type="number"
              className="inputCell"
              value={this.state.repetitions}
              onChange={this.setRepetitions}
            />
          </div>

          <img id="plusImgTT" src={Plus} alt="plus symbol" />
        </div>

        <br />

        <div id="buttonDiv">
          <Link to="/TimerScreen" className="goButton">
            GO
          </Link>
        </div>
        <br />

        <div id="beepSettings">
          <h2>SOUND SETTINGS </h2>

          <div className="beepDiv">
            <label
              className="beepLabel"
              className="beepLabelOn"
              id="labelSound"
            >
              {" "}
              <u>SOUND ON:</u>
            </label>
            <input
              id="checkboxSound"
              className="beepCheckbox"
              type="checkbox"
              onClick={(e) => this.setState({ sound: e.target.checked })}
            />
            {/* fontOpacity: e.target.checked  */}
          </div>

          <div className="beepDiv">
            <label className="beepLabel" className="beepLabelOn">
              {" "}
              &nbsp;&nbsp;HALF TIME MARK:{" "}
            </label>
            <input
              disabled={!this.state.sound}
              id="checkboxHalf"
              className="beepCheckbox2"
              type="checkbox"
            ></input>
            {/* && !this.state.fontOpacity */}
          </div>

          <div className="beepDiv">
            <label className="beepLabel" className="beepLabelOn">
              {" "}
              &nbsp;&nbsp;30sec MARK:{" "}
            </label>
            <input
              disabled={!this.state.sound}
              id="checkbox30"
              className="beepCheckbox"
              type="checkbox"
            ></input>
          </div>

          <div className="beepDiv">
            <label className="beepLabel" className="beepLabelOn">
              {" "}
              &nbsp;&nbsp;20sec MARK:{" "}
            </label>
            <input
              disabled={!this.state.sound}
              id="checkbox20"
              className="beepCheckbox2"
              type="checkbox"
            ></input>
          </div>

          <div className="beepDiv">
            <label className="beepLabel" className="beepLabelOn">
              {" "}
              &nbsp;&nbsp;10sec MARK:{" "}
            </label>
            <input
              disabled={!this.state.sound}
              id="checkbox10"
              className="beepCheckbox"
              type="checkbox"
            ></input>
          </div>

          <div className="beepDiv">
            <label className="beepLabel" className="beepLabelOn">
              {" "}
              &nbsp;&nbsp;10sec COUNTDOWN:{" "}
            </label>
            <input
              disabled={!this.state.sound}
              id="checkboxCountdown"
              className="beepCheckbox2"
              type="checkbox"
            ></input>
          </div>

          <div className="beepDiv">
            <label className="beepLabel" className="beepLabelOn">
              {" "}
              <i>&nbsp;&nbsp;MOTIVATION SPEACHES </i>{" "}
            </label>
            <input
              disabled={!this.state.sound}
              id="checkboxMotivational"
              className="beepCheckbox"
              type="checkbox"
            ></input>
          </div>
        </div>

        <br />

        <hr className="horzLine" />

        <div id="footer">© Berolina-Stralau Futsal Team 2020</div>
      </div>
    );
  }
}
export default Settings;

передайте его здесь вместо # 2 state = { minutes: 2, seconds: 0, reps: 0 }

TimerScreen. js

import React from "react";
import Logo from "../images/logo.png";
import Timer from "../images/timer.png";
import Circle from "../images/circle.png";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Settings from "./Settings";

class TimerScreen extends React.Component {
  componentDidMount() {
    this.myInterval = setInterval(() => {
      const { seconds, minutes } = this.state;
      if (seconds > 0) {
        this.setState(({ seconds }) => ({
          seconds: seconds - 1,
        }));
      }
      if (seconds === 0) {
        if (minutes === 0) {
          clearInterval(this.myInterval);
        } else {
          this.setState(({ minutes }) => ({
            minutes: minutes - 1,
            seconds: 59,
          }));
        }
      }
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.myInterval);
  }

  state = {
    minutes: 2,
    seconds: 0,
    reps: 0,
  };

  render() {
    const { minutes, seconds, reps } = this.state;

    return (
      <div className="mainDiv">
        <div id="header">
          <img id="timerImg" src={Timer} alt="timer symbol" />
          &nbsp; &nbsp;Interval Training Timer&nbsp;&nbsp;
          <img id="timerImg" src={Timer} alt="timer symbol" />
        </div>

        <hr className="horzLine" />

        <img className="logoImg" src={Logo} alt="berolina-stralau logo" />

        <div className="countdownClock">
          {minutes === 0 && seconds === 0 ? (
            <div className="timeIsUp">
              {" "}
              Time is up! <br /> 00:00
            </div>
          ) : (
            <div className="coundownTime">
              {" "}
              {minutes < 10 ? `0${minutes}` : minutes}:
              {seconds < 10 ? `0${seconds}` : seconds}
            </div>
          )}
        </div>

        <img id="circleImg" src={Circle} />

        <div className="repetitionsCount">
          {" "}
          <i>reps left: {reps}</i>{" "}
        </div>

        <div id="pauseDiv">
          <Link to="/PauseScreen" className="goButton">
            PAUSE
          </Link>
        </div>
        <br />

        <div id="setingsDiv">
          <Link to="/" className="settingsButton">
            SETTINGS
          </Link>
        </div>
        <br />

        <hr className="horzLine" />

        <div id="footer">© Berolina-Stralau Futsal Team 2020</div>
      </div>
    );
  }
}
export default TimerScreen;

Я считаю, что важны только 2 части, выделенные жирным шрифтом.

1 Ответ

0 голосов
/ 07 августа 2020

Похоже, вы хотите использовать Reactjs Контекст

...