您将在react状态下存储的数据将在浏览器内存中，刷新时您将丢失该数据。

如果您想要表单提交时的预览功能，那么您可以将数据存储在状态中并在表单提交时显示/隐藏预览。

所以，基本上你可以使用状态或一些第三方状态管理库来存储数据。这是一个基本示例，说明如何在相同的详细信息组件中实现。

import React, { useState } from 'react';

const Details = () => {
  const [name, setName] = useState('');
  const [number, setNumber] = useState(null);
  const [showPreview, setShowPreview] = useState(false);
  return(
    <div>
      {!showPreview && <form onSubmit={e => e.preventDefault()}>
        Name: {" "}
        <input type="text" placeholder="Enter name" onChange={e => setName(e.target.value)} /><br />
        Contact No.: {" "}
        <input type="number" placeholder="Enter contact number" onChange={e => setNumber(e.target.value)} />
        <br />
        <input type="button" value="submit" onClick={() => setShowPreview(!showPreview)}/>
      </form>}
      {showPreview && (<div>
        <p>{name}</p>
        <p>{number}</p>
      </div>)}
    </div>
  );
}


export default Details;

同样，这个答案基于很多假设。也许我们需要问题中的更多细节才能得到准确的答案。

如果您想在任何其他页面上显示相同的数据，那么您可以使用 Redux。它可以将数据存储在 redux 存储中，而您在另一个页面上显示相同的数据。

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

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;