Как открыть страницу с параметром в следующей вкладке (React)?
Я новичок в Web, и вот у меня проблема. :-)
У меня есть такое приложение, есть две страницы StartPage и SelectProject.
На первой странице у меня есть кнопка, которая с onClick делает две вещи:
- меняет состояние toggle, чтобы открыть следующую страницу ->
SelectProject - Отправьте 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.
Как это сделать правильно?