在react中将输入值从页面上的一个组件移动到另一个页面上的另一个组件

Question

我是React的新手，在一个项目上工作，我想从一个页面移动表单的输入值，在提交输入后显示在另一个页面上。

我有下面的Measurement组件和输入字段:

import React, { useState } from "react";
import "./measurements.scss";
import images from "../constants/images";
import { GrCircleInformation } from "react-icons/gr";
import Tooltip from "./Tooltip";
import MeasurementData from "./MeasurementData";
const Measurements = () => {
const [toggleTooltip, setToggleTooltip] = useState(false);
const [weight, setWeight] = useState();
const [height, setHeight] = useState();
const [shoulder, setShoulder] = useState();
const [chest, setChest] = useState();
const [abdominals, setAbdominals] = useState();
const [hips, setHips] = useState();
const [thigh, setThigh] = useState();
const [calf, setCalf] = useState();
const handleSubmit = (e) => {
e.preventDefault();
};
return (
<div className="app__measurements">
<GrCircleInformation
fontSize={16}
onMouseEnter={() => setToggleTooltip(true)}
onMouseLeave={() => setToggleTooltip(false)}
/>
{toggleTooltip && (
<Tooltip text="All measurements should be carried out while muscles are relaxes and be done in the exact same areas of the body every time. The time of day when the measurements are carried out should also be consistent" />
)}
<h2 className="app__measurements-heading">MEASUREMENTS</h2>
<div className="app__measurements-data">
<form className="app__measurements-form" onSubmit={handleSubmit}>
<label htmlFor="weight">Weight (kg)</label>
<br />
<input
type="number"
id="weight"
value={weight}
onChange={(e) => setWeight(e.target.value)}
name="weight"
/>
<br />
<label htmlFor="height">Height (cm)</label>
<br />
<input
type="number"
id="height"
value={height}
onChange={(e) => setHeight(e.target.value)}
/>
<br />
<label htmlFor="shoulder">Shoulders</label>
<br />
<input
type="number"
id="shoulder"
value={shoulder}
onChange={(e) => setShoulder(e.target.value)}
/>
<br />
<label htmlFor="chest">Chest</label>
<br />
<input
type="number"
id="chest"
value={chest}
onChange={(e) => setChest(e.target.value)}
/>
<br />
<label htmlFor="abdominal">Abdominals</label>
<br />
<input
type="number"
id="abdominal"
value={abdominals}
onChange={(e) => setAbdominals(e.target.value)}
/>
<br />
<label htmlFor="hips">Hips</label>
<br />
<input
type="number"
id="hips"
value={hips}
onChange={(e) => setHips(e.target.value)}
/>
<br />
<label htmlFor="thigh">Thighs</label>
<br />
<input
type="number"
id="thigh"
value={thigh}
onChange={(e) => setThigh(e.target.value)}
/>
<br />
<label htmlFor="calf">Calves</label>
<br />
<input
type="number"
id="calf"
value={calf}
onChange={(e) => setCalf(e.target.value)}
/>
<button type="submit" className="app__measurements-btn">
SAVE RESULTS
</button>
</form>
</div>
<img src={images.success} alt="" />
</div>
);
};
export default Measurements;

然后我有下一页，我希望输入在提交后显示:

import React from "react";
import FitnessHeader from "../components/FitnessHeader";
import "./userPage.scss";
const UserPage = () => {
return (
<>
<FitnessHeader />
<div className="app__user">
<div className="app__user-container">
<h1 className="app__user-heading">YOUR PROGRESS</h1>
<div className="app__user-content">
<div className="app__user-measurements-container">
<div className="app__user-section app__user-measurements">
<h2 className="app__user-subheading">LAST MEASUREMENTS</h2>
</div>
<div className="app__user-section app__user-bmr">
<h2 className="app__user-subheading">BMR RATINGS</h2>
</div>
<div className="app__user-section app__user-bmi">
<h2 className="app__user-subheading">BMI RATINGS</h2>
</div>
</div>
<div className="app__user-results">
<h2 className="app__user-subheading">PREVIOUS WORKOUT RESULTS</h2>
</div>
</div>
</div>
</div>
</>
);
};
export default UserPage;

这两个页面在App文件中连接:

import React, { useState } from "react";
import "./App.scss";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import Fitness from "./pages/Fitness";
import UserPage from "./pages/UserPage";
function App() {

return (
<>
<Router>
<Routes>
<Route exact path="/" element={<Home />} />
<Route exact path="/fitness" element={<Fitness />} />
<Route exact path="/user" element={<UserPage />} />
</Routes>
</Router>
</>
);
}
export default App;

不幸的是，我真的不知道如何使这些输入出现在UserPage上。

Answer 1

由于您没有使用任何类型的状态管理或上下文，

你应该通过使子组件更接近最近的父组件来提升状态，在这个例子中是App.js。

在App.js组件中定义所有的状态，然后将状态值作为props传递给相应的组件，如下所示

import {useState} from react
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Fitness from '...'
import UserPage from '....'

function app(){
const [weight, setWeight] = useState();
const [height, setHeight] = useState();
function submitData () =>{}

return (
<BrowserRouter >
<Routes>
<Route path='/' elements={<>home</>}
<Route path='/form' elements={<Fitness 
setWeight={setWeight}
submitData={submitData}
/>}
<Route pat='/user' elements={<UserPage 
weight={weight}
submitData={submitData}
/>}
</Routes>
</BrowserRouter >
)
}

在你的组件

export default function Fitness({ setWeight,submitData }){ use setWeight as required }
export default function UserPage({ weight }){ use weight as required }

你可以在这里阅读更多关于提升状态的信息道具在这里钻孔

我希望这对你有帮助。