React.js 在另一个组件中使用表单输入

Question

所以我正在学习如何在我的 React 应用项目中使用表单输入。 我不太确定该怎么做，道具似乎并没有真正削减它。 因此，如果我有两个组件，一个带有表单，另一个我只想显示输入。 我不想一次渲染这两个组件，而是希望将用户重定向到显示输入的另一个视图。 下面是简单表单的代码。

import React from 'react'
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Second from '../view/second/Second';

    const Form = () => {
    const navigate = useNavigate();

    const [namn, setNamn] = useState('');
    const [personNr, setPersonNr] = useState('');
    const [datum, setDatum] = useState('');
    const [planbok, setPlanbok] = useState('');

    
    return (

        <div>
            <form>
                <div>
                <input type="text" id="namnField" required value={namn} 
    onChange={(n) => setNamn(n.target.value)} placeholder='Namn'></input>
                </div>
                <div>
                <input type="text" id="personNrField" required value={personNr} 
    onChange={(pn) => setPersonNr(pn.target.value)} placeholder='Personnr'></input>
                </div>
                <div>
                <input type="text" id="datumField" required value={datum} 
    onChange={(d) => setDatum(d.target.value)} placeholder='Datum'></input>
                </div>
                <div>
                <input type="text" id="planbokField" required value={planbok} 
    onChange={(p)=>setPlanbok(p.target.value)} placeholder='Plånbokadress'></input>
                </div>
                <button type="submit" id="inputForm"onSubmit {navigate('/second')}>Enter</button>
            </form>
        </div>
    )
}

export default Form

这是我要显示表单输入的组件：

import React from 'react'
import Form from '../../form/Form'

const Second = ({namn, datum, personNr, planbok}) => {
    return (
        <div>
            <p>{namn}, {datum}, {personNr}, {planbok}</p>
        </div>
    )
}

export default Second

如您所见，我尝试使用道具，但这不起作用。 当然，我可以渲染组件中调用的组件，并且可以使用表单输入进行填充。 但这不是我想要实现的，我希望当我在不同的视图中渲染时显示来自表单输入的变量。

我将如何实现这一点，我应该使用 Ajax，钩子 useContext 吗？有没有其他方法可以更好地处理这种情况？ 在此先感谢您的时间。 问候/斯万特。

Answer 1

用 useContext 解决了这个问题。 使用了这个 youtube 视频中关于这个主题的原则： https://www.youtube.com/watch?v=lhMKvyLRWo0&t=342s

我认为按照 MrPickles 作为对我第一篇文章的回答所写的那样做可能是一种更好的做法。