Мне известно об этом, и я пытаюсь передать сведения о пользователе с одной js-страницы для отображения на другой с помощью React, но я не уверен, как это сделать. Вот что у меня есть
Я не уверен, должен ли я передавать реквизиты на страницу дисплея, используя маршрутизацию App.js, или я могу передать ее на страницу, где вводятся данные с помощью NavLink ??. Любая помощь приветствуется
это моя APP.js маршрутизация. Должен ли я передавать реквизит для страниц здесь?
import React, { Component } from 'react';
//import PostList from './posts/YourDetails'
import { BrowserRouter, Switch} from 'react-router-dom';
import { Route} from 'react-router-dom';
import ReactDom from 'react-dom';
import './App.css';
import './index.css';
import home from "./Components/PersonalDetails/home";
import PersonalDetails from "./Components/PersonalDetails/pDetails_Name";
import addDetails from "./Components/PersonalDetails/addDetails";
import YourCar from "./Components/PersonalDetails/YourCar";
import displayDetails from "./Components/PersonalDetails/displayDetails";
import TEST from "./Components/TEST";
import Navigation from "./Components/Navigation";
class App extends Component {
render() {
return (
<BrowserRouter>
<div>
<Navigation / >
<Switch>
<Route
path="/"
component={home} exact/ >
<Route
path="/pDetails_Name"
component={PersonalDetails}/ >
<Route
path="/displayDetails"
component={displayDetails}/ >
<Route component={Error}/ >
</Switch>
<TEST / >
</div>
</BrowserRouter>
)
}
}
export default App;
здесь я получаю данные, введенные пользователем, и получаю состояние
import {NavLink} from 'react-router-dom'
import React, {Component } from 'react'
class pDetails_Name extends React.Component{
/*const pDetails_Name = () => {*/
constructor(props){
super(props)
this.state = {
FirstName: "",
MiddleName:"",
Surname: "",
Email: ""
}
this.handleInputChange = this.handleInputChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleInputChange =(event)=>{
this.setState({[event.target.name]:event.target.value});
}
handleSubmit =(event)=> {
event.preventDefault()
const user = {
FirstName: this.state.FirstName,
MiddleName: this.state.MiddleName,
Surname: this.state.Surname,
Email: this.state.Email,
}
console.log("The details entered are: " , user);
}
getInitialState () {
return {
selectedOption: ''
};
}
render(){
return(
<div id="Overhead">
<div className="borderText">
Lets get some personal details
</div>
<div className ="container">
<form onSubmit ={this.handleSubmit}>
<div className="row">
<div className="col-100">
<label id="btnLabel">Have you been a permanent resident of the USA from birth?</label>
</div>
<div className="col-75">
<input type="radio"
value="Yes"
name ="Resident"
defaultChecked={this.state.selectedOption === 'Yes'}
onChange={this.handleInputChange}
/> Yes<br></br>
<input
type="radio"
value="No"
name ="Resident"
defaultChecked={this.state.selectedOption === 'No'}
onChange={this.handleInputChange}
/> No<br></br>
</div>
</div>
<div className="row">
<div className="col-5">
<label>Title</label>
</div>
<div className="col-15">
<select name= "Title" onChange={this.handleInputChange}>
<option value="">Select</option>
<option value="Mr">Mr</option>
<option value="Miss">Miss</option>
<option value="Mrs">Mrs</option>
<option value="Dr">Dr</option>
</select>
</div>
<div className="col-25">
<label>First Name:</label>
</div>
<div className="col-75">
<input type="text"
name="FirstName"
placeholder="Your first name.."
onChange={this.handleInputChange} value={this.state.FirstName}/>
</div>
</div>
<div className="row">
<div className="col-5">
<label>Middle Name:</label>
</div>
<div className="col-15">
<input type="text"
name="MiddleName"
placeholder="Your middle name (Optional).. "
onChange={this.handleInputChange} value={this.state.MiddleName}
/>
</div>
<div className="col-25">
<label>Surname:</label>
</div>
<div className="col-75">
<input type="text"
name="Surname"
placeholder="Your surname.."
onChange={this.handleInputChange} value={this.state.Surname} />
</div>
</div>
<div className="row">
<div className="col-5">
<label>Gender:</label>
</div>
<div className="col-15">
<select name = "Gender" onChange={this.handleInputChange} >
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div className="col-25">
<label>Marital Status:</label>
</div>
<div className="col-75">
<select name = "MaritalStatus" onChange={this.handleInputChange}>
<option value="">Select</option>
<option value="Married">Married</option>
<option value="Single">Single</option>
<option value="Civil_Partnership">Civil Partnership</option>
<option value="Other">Other</option>
</select>
</div>
</div>
<div className="row">
<div className="col-5">
<label>Age Range:</label>
</div>
<div className="col-15">
<select name="AgeRange" onChange={this.handleInputChange}>
<option value="">Select</option>
<option value="17-25">17-25</option>
<option value="26-60">26-60</option>
<option value="61-80">61-80</option>
</select>
</div>
<div className="col-25">
<label>Email:</label>
</div>
<div className="col-75">
<input type="text"
name="Email"
placeholder="Your email.."
onChange={this.handleInputChange}
value={this.state.Email}/>
</div>
</div>
<button>Submit </button>
<div className="borderButtons">
<ul className="header">
<li className ="borderLinks" type="label"><NavLink id="nav" to="/">Back</NavLink></li>
<li className ="borderLinks" type="label"><NavLink id="nav" to="/displayDetails">Next</NavLink></li>
</ul>
</div>
</form>
</div>
</div>
)
} //end of render
}
export default pDetails_Name;
и я пытаюсь отобразить реквизиты, введенные пользователем, для отображения на странице ниже, но не знаю, как это сделать
import {NavLink} from 'react-router-dom'
import React, {Component } from 'react'
class displayDetails extends React.Component{
/*const pDetails_Name = () => {*/
constructor(props){
super(props)
this.state = {
FirstName: "",
MiddleName:"",
Surname: "",
Email: ""
}
}
componentDidMount() {
console.log(this.props.match.params.name);
}
render(){
return(
<div id="Overhead">
<div className="borderText">
{this.props.user}
</div>
<div className="borderButtons">
<ul className="header">
<li className ="borderLinks" type="label"><NavLink id="nav" to="/pDetails_Name">Back</NavLink></li>
</ul>
</div>
</div>
)
} //end of render
}
export default displayDetails;