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

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;

这篇关于如何使用react js在另一个页面显示html表单提交的信息?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！