React js 中的表单数据

Question

如何在另一个页面上显示表单提交的数据？我正在尝试在另一个页面上获取数据，但我无法在已提交表单的另一个页面上获取数据。

Answer 1

这是答案：How to display the information submitted in the html form on another page using react js?，下面是来自此链接的复制答案：

首先，我们要在应用程序上创建一个可以接收数据的函数，然后将其作为道具发送给组件：

import React from 'react';
import Details from './form';
function App() {
    const getFormData = function (name, number) {
        console.log('Name: ', name, 'Number: ', number)
    }
    return (
        <div className="App">
            <header className="App-header">
                <Details sendFormData={getFormData} />
            </header>
        </div>
    );
}

export default App

然后，在组件内部，您要设置每个输入以在它们更改时更新它们的状态。当您点击提交时，您会将状态传递给应用组件的 getFormData 函数。

import React, { useState } from 'react';

const Details = (props) => {
    const [userName, setName] = useState('');
    const [userNumber, setNumber] = useState('');
    const handleSubmit = () => {
        props.sendFormData(userName, userNumber)
    }

    return (
        <div>
            Name: {" "}
            <input type="text" placeholder="Enter name"
                onChange={event => setName(event.target.value)} /><br />
            Contact No.: {" "}
            <input type="number" placeholder="Enter contact number"
                onChange={event => setNumber(event.target.value)} />
            <br />
            <button onClick={() => handleSubmit()} >Submit</button>
        </div>
    );
}

export default Details;