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

2022-01-19 00:00:00 reactjs frontend javascript html

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

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

import React, { component } from 'react';var details = () =>{返回(
<表格>名称: {" "}<input type="text" placeholder="输入姓名"/><br/>联系方式.: {" "}<input type="number" placeholder="输入联系电话"/><br/><输入类型="提交" 值="提交"/></表格></div>);}导出默认详细信息；

我的 app.js 页面

从'react'导入反应；从'./logo.svg'导入标志；导入'./App.css'；从 './form/form' 导入详细信息；函数应用程序(){返回 (<div className="App"><header className="App-header"><详情/></标题></div>);}导出默认应用程序；

解决方案

首先，我们要在app上创建一个可以接收数据的函数，然后将其作为prop发送给组件:

import React from 'react';从 './form' 导入详细信息；函数应用程序(){const getFormData = function (name, number) {console.log('姓名:'，姓名，'编号:'，编号)}返回 (<div className="App"><header className="App-header"><详情 sendFormData={getFormData}/></标题></div>);}导出默认应用

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

import React, { useState } from 'react';const 详细信息 = (props) =>{const [userName, setName] = useState('');const [userNumber, setNumber] = useState('');常量句柄提交 = () =>{props.sendFormData(userName, userNumber)}返回 (
名称: {" "}<输入类型=文本"占位符=输入名称"onChange={事件=>setName(event.target.value)}/>

I want to show all the details filled in the html form on another page using react js. I have created the html form which is the landing page. And after clicking on submit all the information should be displayed on another page.

My form.js page for creating the html form

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;

My app.js page

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;

解决方案

First, on the app we want to create a function that can receive the data, then send it to the component as a 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

Then, inside the component you want to set each input to update their state as they change. When you click submit, you pass the state to the up to the app components getFormData function.

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;

相关文章