Javascript 如何使用React.js从不同页面的表单向表中添加输入值？

我是新来的

我正在做一个react项目，它在主页上有一个表，显示不同人的数据。我的目标是将不同页面上的表单中的人员详细信息添加到此表中

我未来的目标是将这些值添加到数据库（sqlite3）中进行永久存储，并在当前表中显示这些详细信息

每次用户填写表单时，表应添加多行

App.js

    import React, { Component } from "react";
    import { HashRouter as Router, Route, Link, NavLink, Redirect, Switch } from "react-router-dom";
    import { useHistory } from 'react-router-dom';

    import SignUpForm from "./pages/SignUpForm";
    import SignInForm from "./pages/SignInForm";
    import AccountPage from "./pages/AccountPage";
    import HomePage from "./pages/HomePage";

    import "./App.css";

    class App extends Component {

    render() {
    return (
    <Router basename="/react-auth-ui/">
    <div className="App">
      
      <div className="App__Form">
        <Route path="/sign-in" component={SignInForm}></Route>
        <Route path="/HomePage" component={HomePage}></Route>
        <Route path="/AccountPage" component={AccountPage}></Route>
        <Route exact path="/" component={SignUpForm}></Route>
        
        
      </div>
      </div>
      </Router>
      );
      }
      }

      export default App;

import React，{Component}来自“React”；
从“react Router dom”导入{HashRouter as Router，Route，Link，NavLink，Redirect，Switch}；
从'react router dom'导入{useHistory}；
从“/pages/SignUpForm”导入注册表单；
从“/pages/SignInForm”导入SignInForm；
从“/pages/AccountPage”导入AccountPage；
从“/pages/HomePage”导入主页；
导入“/App.css”；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

SignUpForm.js

   import React, { Component } from "react";
   import { Link } from "react-router-dom";
   import HomePage from "./HomePage";

   class SignUpForm extends Component {

   constructor(props) {
   super(props);

    this.state = {
 
    name: "",
    weight: "",
    height: "",
  
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
    }

   handleChange(e) {
   let target = e.target;
   let value = target.type === "checkbox" ? target.checked : target.value;
   let name = target.name;

   this.setState({
   [name]: value,
   });
   }

   handleSubmit(e) {
   e.preventDefault();

   this.props.history.push('/HomePage');
   console.log("The form was submitted with the following data:");
   console.log(this.state);

   }

   render() {
   return (
   <div className="FormCenter">
    <form onSubmit={this.handleSubmit} className="FormFields">
      <div className="FormField">
      <div className="heading">
        
          <h2>Project</h2>
        
      </div>
      
          <div>
          <h1>Enter Person details</h1>
          </div>
          <label className="FormField__Label" htmlFor="name">
          Full Name
          </label>
          <input
          type="text"
          id="name"
          className="FormField__Input"
          placeholder="Enter your full name"
          name="name"
          value={this.state.name}
          onChange={this.handleChange}
           />
          </div>

       
          <div className="FormField">
          <label className="FormField__Label" htmlFor="weight">
          Weight
          </label>
          <input
          type="number"
          id="weight"
          className="FormField__Input"
          placeholder="Enter your weight"
          name="weight"
          value={this.state.weight}
          onChange={this.handleChange}
           />
          </div>

          <div className="FormField">
          <label className="FormField__Label">Height</label>
          <input
          type="number"
          id="height"
          className="FormField__Input"
          placeholder="Enter your height"
          name="height"
          value={this.state.height}
          onChange={this.handleChange}
          />
      
          </div>

         <div className="FormField">
          <button className="FormField__Button mr-20">Add Persont</button>{" "}
        
        
           <Link to="/HomePage" className="FormField__Link">
            Back
          </Link>
           </div>
          </form>
          </div>
           );
           }
           }

           export default SignUpForm;

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
从“/HomePage”导入主页；
类注册表单扩展组件{
建造师（道具）{
超级（道具）；
此.state={
姓名：“，
重量：“，
高度：“，
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
}
手变（e）{
设target=e.target；
让value=target.type==“复选框”？target.checked:target.value；
让name=target.name；
这是我的国家({
[名称]：值，
});
}
handleSubmit（e）{
e、 预防默认值（）；
this.props.history.push（'/HomePage'）；
log（“提交的表单包含以下数据：”）；
console.log（this.state）；
}
render（）{
返回(
项目
输入人员详细信息
全名
重量
高度
添加Persont{“}
返回
);
}
}
导出默认注册表；

主页.js

    import React, { Component } from "react";
    import { Link } from "react-router-dom";
    import SignInForm from "./SignInForm";
    import SignUpForm from "./SignUpForm";
    import Table from 'react-bootstrap/Table';
    import * as ReactBootStrap from "react-bootstrap";

    class HomePage extends Component {

    onSub = () => {

    this.props.history.push('/');

    }


    render() {

    const name = this.props.name;
    const weight = this.props.weight;
    const height = this.props.height;

    return (
  
    <div className="FormCenter">
   
       <div className="heading">
        
          <h2>Project</h2>
        
        </div>
        <div className="FormField">
          <div>
              <h1>Welcome Rahil</h1>
              <h2>Person Details</h2>
               
          </div>
          <div>
          <table>
            <tbody>
        <tr>
          <th>Name</th>
          <th>Weight</th>
          <th>Height</th>
        </tr>
        <tr>
        <th>rahil</th>
        <th>122</th>
        <th>6</th>  
        </tr>  
        <tr>
        <th>{name}</th>
        <th>{weight}</th>
        <th>{height}</th>  
        </tr>  
        
      </tbody>
      </table>
          </div>
      </div>

     
      

      <div className="FormField">
        <button className="FormField__Button mr-20" onClick={this.onSub}>
          Add new Patient
        </button>{" "}
        <Link to="/sign-in" className="linkForm" style={{color:"white", textDecoration:"none"}}>
          Logout
         </Link>
        
         </div>
    
         </div>
          );
          }
          }

          export default HomePage;

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
从“/signinfo”导入signinfo；
从“/SignUpForm”导入注册表单；
从“react引导/表格”导入表格；
从“react bootstrap”导入*作为react bootstrap；
类主页扩展组件{
onSub=（）=>{
this.props.history.push（'/'）；
}
render（）{
const name=this.props.name；
常量重量=此.props.weight；
const height=this.props.height；
返回(
项目
欢迎拉希尔
人员详细信息
名称
重量
高度
拉希尔
122
6.
{name}
{weight}
{height}
添加新患者
{" "}
注销
);
}
}
导出默认主页；

要实现您的目标，您需要管理应用程序的状态。当您想要管理整个应用程序中的状态时（具有用于填充数据和显示数据的不同页面），您应该实现一个状态管理库，如Redux或使用React上下文API

使用状态管理库，您可以在应用程序中实现提供者模式。这允许您将逻辑与ui分离，并非常高效地管理状态

重演：

反应上下文API：

有更多的国家管理图书馆，但这两个非常流行。就复杂性而言，只需检查哪个最适合您的需要