javascript - 如何使用react js在另一页上显示以html表单提交的信息？

我想使用react js在另一页上的html表单中显示所有详细信息。我已经创建了html表单，它是登录页面。单击提交后，所有信息应显示在另一页上。

我的form.js页面，用于创建html表单

import React, { component } from 'react';

var details = () => {
    return(
        <div>
            <form>
                Name: {" "}
                <input type="text" placeholder="Enter name" /><br />
                Contact No.: {" "}
                <input type="number" placeholder="Enter contact number" />
                <br />
                <input type="submit" value="submit"/>
            </form>
        </div>
    );
}


export default details;

我的app.js页面

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Details from './form/form';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Details />
      </header>
    </div>
  );
}

export default App;

最佳答案

您将以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存储中，并且在另一页上显示相同的数据。