- 此问题在此处已有答案**:
How to pass data from a page to another page using react router(5个答案)
21小时前关门了。
我在url "/home "上有一个停车场,用户要选择一个日期,然后选择一个地点,然后单击一个按钮(" book a spot "),将他们重定向到"/home/book"。在此页面上,向用户呈现一个表单,该表单应该呈现用户在上一个url/页面("/home ")中选择的日期,时间和停车地点。
如何将这些参数从"/home "传递到"/home/book"上的表单?如果这不是理想的方法,那应该怎么做?
工作原理:我可以看到停车位的"id",以及,用户选择的"日期"。
停车场Map代码
export default function ParkingMap(){
const navigate = useNavigate(); // the navigation hook
const [data, setData] = useState(null);
const [date, setDate] = useState('');
const dateInputRef = useRef(null);
const [isActive, setIsActive] = useState(false);
const [spot, setSelectedSpot] = useState(null);
useEffect(() => {
getSpots();
}, []);
function getSpots() {
fetch('http://localhost:3001/parking-data/')
.then(response => {
return response.json();
})
.then(data => {
console.log("data " + data)
setData(data);
});
}
if( !data ){
return <div/>
}
const parkingSpots = data.data.parking_spots;
console.log(parkingSpots);
const handleChange = (e) => {
setDate(e.target.value);
};
const changeSpot = (e) => {
console.log("target id is " + e.target.id) // returns the spot selected
setSelectedSpot(e.target.id);
setIsActive(current => !current);
console.log(" passed the setIsActive code ");
};
// this doesnt work lol
const handleSubmit = (e) => {
e.preventDefault();
navigate("/home/booking/");
};
return (
<div>
<h1>Selected Date: {date} </h1> // need the selected date from here
<input
type="date"
onChange={handleChange}
ref={dateInputRef}
/>
<div class="flex-container-parking">
<div class="flex-parking-left">
<div
className='parkingSpot'
id="5"
onClick={changeSpot}
style={{
backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 5 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
borderColor: isActive ? 'green' : 'red'
}}>
<div className='circle'>
<AccessibleIcon/>
</div>
</div>
<hr />
<div
id="1"
onClick={changeSpot}
className='parkingSpot'
style={{
backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 1 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
borderColor: isActive ? 'green' : 'lightblue'
}}
>
<div className='circle'>
1
</div>
</div>
<hr/>
<div
className='parkingSpot'
id="2"
onClick={changeSpot}
style={{
backgroundColor: parkingSpots.find(ps => ps.parking_spot_number === 2 && ps.occupancy === true) ? 'lightgrey' : 'lightblue',
borderColor: isActive ? 'green' : 'lightblue'
}} >
<div className='circle'>
2
</div>
</div>
</div>
</div>
</div>
<Button variant="contained" onSubmit={handleSubmit}> Next </Button> // ideally this should navigate to the booking form page
</div>
);
};
预订表格的代码:
export default function BookingForm(){
const navigate = useNavigate(); // the navigation hook
const handleClick = event => {
event.preventDefault();
navigate('/home'); //redirects to the /home address
}
const handleSubmit = event => {
event.preventDefault();
navigate('/home/booking/QRCode'); //redirects to the /home address
}
// need to add post request of parking spot, date, full name, car type, license plate, phone number
return (
<div className='flex-container'>
<div className='row'>
<div className="flex-container-accessories">
<div class="flex-accessories">
<div
className='backButton'
id="icon"
onClick={handleClick}
>
<ArrowBackIosIcon
className="icon"
sx={{fontSize: 'medium'}}
/>
</div>
</div>
</div>
</div>
{/* <BackIcon onClick={handleClick}> </BackIcon> */}
<div className='row'>
<header>
<div>
{/* based off parking spot id: book for {spot}, date {date}, time {time} */}
<h2> Spot # <br/> Date <br/> Time </h2>
</div>
</header>
</div>
<div className='row'>
<Box
component="form"
sx={{
'& > :not(style)': { m: 1},
}}
noValidate
autoComplete="off"
>
<TextField id="outlined-basic" label="Full Name" variant="outlined" size="small" />
<TextField id="outlined-basic" label="Email" variant="outlined" size="small"/>
<TextField id="outlined-basic" label="Car Type" variant="outlined" size="small"/>
<TextField id="outlined-basic" label="License Plate" variant="outlined" size="small" />
<TextField id="outlined-basic" label="Phone Number" variant="outlined" size="small"/>
<Button variant="contained" onClick={handleSubmit}> Submit </Button>
</Box>
<div className="row">
<ParkingLegend/>
</div>
</div>
</div>
);
};
"/home "上的每个停车位都是一个div,并使用一个类进行定制。在内部,停车位有一个" id "参数,用于对" selected "停车位进行分类。为了确定是否选择了某个停车位,我使用了一个带有e. target. value的changeSpot,它返回" selected "停车位的id。选择日期的过程遵循类似的模式。
2条答案
按热度按时间8yparm6h1#
也许您可以将这些值存储在sessionStorage或localStorage中
等等其他数据
因为这些值只是用户输入,然后在/home/book/ component链接中使用
其他数据也是如此
xj3cbfub2#
您应该考虑使用React-redux或redux包。它专门用于在不属于彼此的子组件之间共享 prop 。https://react-redux.js.org/