如何使用 React 组件将数据从表单传递到表中

ReactJS 是一个用于构建 UI 组件的前端库。在本文中，我们将学习使用 React 组件将数据从表单传递到表中。这将使用两个名为 Table 和 form 的 React 组件来完成。我们将数据输入到一个表格中，该表格将显示在“提交”的表格中。

创建 React 应用程序并安装模块：

第 1 步：使用以下命令创建一个 React 应用程序。

npx create-react-app 

第 2 步：创建项目文件夹（即 my-first-app）后，使用以下命令移动到该文件夹。

cd my-first-app

项目结构：它看起来像这样。

第 3 步：创建一个虚拟 JSON 文件；最初包含以下一个对象并将其保存为data.json

[ {"id":1,"name":"Akshit","city":"Moradabad"} ]

实现：现在在各个文件中写下以下代码。

table.jsx

import React, { useState } from 'react';
  
function StudentForm(props) {
  const [name, setName] = useState('');
  const [city, setCity] = useState('');
  
  const changeName = (event) => {
    setName(event.target.value);
  };
  
  const changeCity = (event) => {
    setCity(event.target.value);
  };
  
  const transferValue = (event) => {
    event.preventDefault();
    const val = {
      name,
      city,
    };
    props.func(val);
    clearState();
  };
  
  const clearState = () => {
    setName('');
    setCity('');
  };
  
  return (
    

      Name
      
      City
      
       Click Me
    
  );
}
  
export default StudentForm;

表单.jsx

import React, { useState } from 'react';
import StudentForm from './form';
import jsonData from './data.json';
  
function TableData() {
  const [studentData, setStudentData] = useState(jsonData);
  
  const tableRows = studentData.map((info) => {
    return (
      
        {info.id}
        {info.name}
        {info.city}
      
    );
  });
  
  const addRows = (data) => {
    const totalStudents = studentData.length;
    data.id = totalStudents + 1;
    const updatedStudentData = [...studentData];
    updatedStudentData.push(data);
    setStudentData(updatedStudentData);
  };
  
  return (
    

      
        
          
            
            
            
          
        
        {tableRows}
      
Sr.NO
Name
City

      
    
  );
}
  
export default TableData;

应用程序.js

import TableData from './table';
  
function App() {
  return (
    

      
Hello Geeks!!!
      
    
  );
}
  
export default App;

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：