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

Question

我是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>;
}

我需要做什么？从哪里开始？感谢您的回答：(

Answer 1

1. 您需要用一个空数组初始化一个state属性
2. 您需要将一个函数绑定到按钮，该按钮将向该数组添加一个对象
3. 在JSX中，您需要在这个数组上进行映射，并且对于其中的每个元素，都添加一个tr标记，其中包含td和消息

你可以试试这样的东西：

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>;
}

Answer 2

使用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

Answer 3

好的，您应该阅读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>