Как открыть страницу с параметром в следующей вкладке (React)?

Я новичок в Web, и вот у меня проблема. :-) У меня есть такое приложение, есть две страницы StartPage и SelectProject.

На первой странице у меня есть кнопка, которая с onClick делает две вещи:

  1. меняет состояние toggle, чтобы открыть следующую страницу -> SelectProject
  2. Отправьте paragraph с некоторым содержанием.

пока все работает как положено. У меня есть одна кнопка на StartPage, когда я нажимаю на нее, открывается следующая страница SelectProject с параметром из StartPage

вот мой код:

App.js

import './App.css';
import StartPage from './StartPage'
import { Component } from 'react';

class App extends Component {

  render() {
    return (
      <StartPage />
    );

  }
}
export default App;

StartPage.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import SelectProject from './SelectProject'

export default class StartPage extends Component {
  constructor() {
    super()
    this.state = {
      isToggleOn: true,
      name: "Tanya"
    };
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick = () => {
    this.setState(state => ({
      isToggleOn: !state.isToggleOn
    }));
    console.log(this.state.isToggleOn);
  }


  render() {
    if (this.state.isToggleOn == false) {
      return (
        <SelectProject name={this.state.name} />
      )
    }
    else {
      return (
        <div>
          <button onClick={(e) => { this.handleClick() }}> {this.state.isToggleOn ? 'ON' : 'OFF'}
          </button>
        </div>
      )
    }
  }
}

SelectProject.js

import React, { Component } from 'react'
import PropTypes from 'prop-types'

export class SelectProject extends Component {

  render() {
    return (
      <div>
        <p > Click me {this.props.name} </p>
      </div>
    )
  }
}

export default SelectProject

Проблема в том, что мне нужно открыть SelectProject (моя вторая страница) в следующем табе(не в моей текущей StartPage) с параметром из StartPage.

то, что я ожидаю увидеть, - это когда я нажимаю кнопку, следующая вкладка открывается с paragraph который содержит параметры из предыдущего.

Для этого я изменила SelectPage, добавив window.open:

...
render() {
    if (this.state.isToggleOn == false) {
      return (
        <SelectProject onClick={()=> window.open("someLink", "_blank")} name={this.state.name} />
      )
    }
    else { 
...

а также я изменила SelectProject на

...
export class SelectProject extends Component {

  render() {
    return (
      <div>
        <p onClick={() => this.props.onClick()}> Click me {this.props.name} </p>
      </div>
    )
  }
}...

это не работает, результат: текущая страница изменяется на SelectProject, а следующая вкладка открывается как StartPage.

Как это сделать правильно?


Ответы (0 шт):