Reactjs 如何使用typescript在react应用程序中单击添加另一个表行

我对React和TypeScript是新手。我想在有人单击按钮（FontAwesomeIcon）时在表中添加新行。我甚至不知道从哪里开始

这是我的密码

import React from "react";
import './SchemeFillData.scss';
import {faPlus} from "@fortawesome/free-solid-svg-icons/faPlus";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

export function SchemeFillData() {
    return <div className='schemedata'>
            <table className='schemedata__attr'>
                <thead>
                <th className='schemedata__attr__title' colSpan={2}>
                    Atrybuty
                    <FontAwesomeIcon className='schemedata__add' icon={faPlus} size='lg' color='lightgray'/>
                </th>
                </thead>
                <tbody>
                <tr>
                    <td className='scheme__attr__cell'>
                        <input className='schemedata__input attr__input' placeholder='Nazwa atrybutu' type='text'
                               id='unit'/>
                    </td>
                    <td className='scheme__attr__cell'>
                        <select id="defVat" className='schemedata__select attr__select'>
                            <option value="" disabled selected>Wybierz kolumnę</option>
                        </select>
                    </td>
                </tr>
                </tbody>
            </table>
    </div>;
}

从“React”导入React；
导入“/SchemeFillData.scss”；
从“@fortawesome/free solid svg icons/faPlus”导入{faPlus}”；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
导出函数SchemeFillData（）{
返回
闭锁
维比尔兹·科卢姆
;
}

我需要做什么？从哪里开始？谢谢你的回答：）

您需要使用空数组初始化状态属性

您需要将一个函数绑定到按钮，按钮将向该数组添加一个对象

在JSX中，您需要映射到这个数组，并且对于其中的每个元素，您添加一个带有td和消息的tr标记

您可以尝试以下方式：

import React, { useState } from "react";
import './SchemeFillData.scss';
import {faPlus} from "@fortawesome/free-solid-svg-icons/faPlus";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";

export function SchemeFillData() {
    const [array, setArray] = useState([]);

    function addNewRow() {
      setArray([...array, {}]);
    }

    return <div className='schemedata'>
            <table className='schemedata__attr'>
                <thead>
                <th className='schemedata__attr__title' colSpan={2}>
                    Atrybuty
                    <FontAwesomeIcon className='schemedata__add' icon={faPlus} size='lg' color='lightgray' onClick={addNewRow} />
                </th>
                </thead>
                <tbody>
                <tr>
                    <td className='scheme__attr__cell'>
                        <input className='schemedata__input attr__input' placeholder='Nazwa atrybutu' type='text'
                               id='unit'/>
                    </td>
                    <td className='scheme__attr__cell'>
                        <select id="defVat" className='schemedata__select attr__select'>
                            <option value="" disabled selected>Wybierz kolumnę</option>
                        </select>
                    </td>
                </tr>
                {array && array.map((_, index) => (
                  <tr key={index}> <td className='scheme__attr__cell'> <input className='schemedata__input attr__input' placeholder='Nazwa atrybutu' type='text' id='unit'/> </td> <td className='scheme__attr__cell'> <select id="defVat" className='schemedata__select attr__select'> <option value="" disabled selected>Wybierz kolumnę</option> </select> </td> </tr>
                )}
                </tbody>
            </table>
    </div>;
}

import React，{useState}来自“React”；
导入“/SchemeFillData.scss”；
从“@fortawesome/free solid svg icons/faPlus”导入{faPlus}”；
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
导出函数SchemeFillData（）{
const[array，setArray]=useState（[]）；
函数addNewRow（）{
setArray（[…数组，{}]）；
}
返回
闭锁
维比尔兹·科卢姆
{array&&array.map（（\ux，index）=>(
维比尔兹·科卢姆
)}
;
}

好的，您应该阅读react文档以了解此框架的工作原理，但本质上，您需要从状态变量呈现“表行”。因此，为了便于理解，让我们假设您有一个变量rows=[]。您需要创建一个向该行添加内容的函数：

  const addRow = (someText) => {
    this.rows.push({content: someText}
  }

当有人单击你的按钮时，你应该调用该函数。这将在你的数组中添加一个新对象。如果你的行映射到该变量，它应该作为基本版本：

<tbody>
  {this.state.rows.map(( obj, index ) => {
      return (
        <tr key={index}>
          <td>{obj.content}</td>
        </tr>
      );
    })}
</tbody>

{this.state.rows.map（（obj，index）=>{
返回(
{obj.content}
);
})}

使用typescript，您可以这样做：

从“React”导入React，{useState}；
导入“/styles.css”；
//此类型描述了每行的数据应如何成形
类型RowData={
消息：字符串；
}
//在这里，我们定义一个接口来描述组件状态的形状
//这是一个具有键“rows”的对象，其中包含RowData数组
界面状态{
行：RowData[]；
}
导出默认函数App（）{
//在这里，我们使用IState接口控制useState函数的参数
const[state，setState]=useState（{rows:[]}）；
常量addRow=（）=>{
设定状态({
行：[…state.rows，{消息：“我的新元素”}]
})
} 
const{rows}=状态；
返回(
闭锁
添加行
{rows.map（元素=>(
{element.message}
))
}
);
}
在这里输入代码

我必须把与上面相同的行放在这里我应该放什么？

setArray（[…array，newElement]）；

放在

…array

要精确复制粘贴文件，并告诉我是否有错误：）这是一个：这是另一个：哦，是的，你使用的是TypeScript，所以有错误类型，我编辑了一篇文章，非常感谢！

    import React, { useState }from "react";
    import "./styles.css";
    
    // this type describe how the data of each rows should be shaped
    type RowData = {
      message: string;
    }

    // here we define an inteface to describe the shape of our component state
    // this is an object with a key 'rows' who contains an array of RowData
    interface IState {
      rows: RowData[];
    }
    
    export default function App() {
      // here we are controlling the parameters of useState function with our IState interface
      const [state, setState] = useState<IState>({rows: []});
    
      const addRow = () => {
        setState({
          rows: [...state.rows, { message: "my new element" }]
        })
      } 
    
      const { rows } = state;
    
      return (
        <div className='schemedata'>
          <table className='schemedata__attr'>
              <thead>
                <th className='schemedata__attr__title' colSpan={2}>
                    Atrybuty
                    <button onClick={addRow}>Add row</button>
                </th>
              </thead>
              <tbody>
                { rows.map(element => (
                    <tr> 
                      <td className='scheme__attr__cell'> 
                        <input className='schemedata__input attr__input' placeholder='Nazwa atrybutu' type='text' id='unit'/> 
                      </td> 
                      <td className='scheme__attr__cell'> 
                        <select id="defVat" className='schemedata__select attr__select'> 
                            <option value="" disabled selected>{element.message}</option> 
                        </select> 
                      </td> 
                    </tr>
                  ))
                }
              </tbody>
          </table>
        </div>
      );
    }

    enter code here