如何使用react js将html表单提交的信息显示在另一个页面上？

Question

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

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

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;

Answer 1

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

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

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

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

Answer 2

首先，在应用程序上，我们要创建一个可以接收数据的函数，然后将其作为 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;