如何使用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;