javascript - 如何将输入表单中的值绑定到 jsx 中的组件？该函数在 appjs 内部，我需要弄清楚如何将状态设置为 jsx

Question

我对做出反应非常陌生，刚刚从这里开始，我想请人解释一下如何设置从 createEmployee 函数到 Employee JSX 的输入状态。我非常感谢被展示如何做到这一点以及解释为什么以及如何设置它。我已经声明了一些 exmployees，并希望在提交 createEmployee 表单时添加更多内容。我知道我也可以创建一个新的表单组件，但我目前的问题是只使用 vanilla js。那里还有一些其他的 jsx 文件，例如我在使用的教程中包含的 kounter。

我非常喜欢绿拇指，所以请放轻松:(

import logo from './logo.svg';
import './App.css';
import './Employee';
import './Cou3';
import Employee from './Employee';
import Counter3 from './Cou3';
import { useLayoutEffect } from 'react';
//import Counter from './Counter';
import Kounter from './Kounter2';

const empInfo = [
    
  {
      firstName: "Jack",
      lastName:"Smith",
      age:"21",
  },

  {
      firstName: "steph",
      lastName:"garcia",
      age:"21",
  },

  {
      firstName: "joe",
      lastName:"nieto",
      age:"21",
  },

  {
      firstName: "Jack",
      lastName:"josh",
      age:"21",
  },
]


 
    function App() {
          
        
          function createEmployee(e){
            e.preventDefault()
            const employee = {
              firstName: e.target.children.name.value,
              lastName: e.target.children.lname.value,
              age: e.target.children.age.value,
            }
            // Take employee and push it to the employee array
            // Update employee array to use setState
            console.log(employee)
          }
          return (
            <div className="App">
              <header className="App-header">
                <img src={logo} className="App-logo" alt="logo" />
                <h1>Company Directory</h1>
                <form onSubmit={(event)=>createEmployee(event)}>
                  <input name="name"/>
                  <input name="lname"/>
                  <input name="age"/>
                  <button type="submit">submit</button>
                </form>
                {empInfo.map(employee =>{
                  const {firstName, lastName, age} = employee;
                  return(
                    <Employee firstName={firstName} lastName = {lastName} age = {age}/>
                  );
        
                })}
        
                  <Kounter/>        
                
                
                {/*
                <Employee firstName="Jack" lastName="Smith"/>
                <Employee firstName="Steph" lastName="garcia"/>
                <Employee firstName="Joe" lastName="nieto"/>
                <Employee firstName="Jack" lastName="josh"/>
                <Counter3/>
                */}
              </header>
        
            </div>
          );
        }
        
        
        export default App;

/////雇佣JSX

import React from "react";
 


const Employee = (props) =>{
console.log(props);
const {firstName, lastName, age} = props;
return (
<div>
<h1>Employee name: {firstName} {lastName} {age}</h1>
</div>
);

};



export default Employee;
        

标签： javascriptreactjs