Добавление строки таблицы в таблицу в действии

Добавление строки таблицы в таблицу в действии

Я новичок в React и пытаюсь создать очень простой инструмент для создания расписаний, где пользователи могут добавлять задачи в приложение и сохранять. Я использую React, а также Typescript.

Пока у меня есть основной компонент, который включает в себя пустой массив задач и таблицу. Затем внутри тела таблицы я сопоставил строки таблицы и отдельный компонент, включающий теги.

В верхней части таблицы я включил кнопку, которая при нажатии должна создать новый массив задач (чтобы не изменять состояние), затем использует метод concat для состояния в новом массиве элементов и добавляет новую задачу. При нажатии кнопки «Добавить элемент» ничего не происходит, может кто-нибудь сказать мне, что я делаю неправильно? и если это лучший способ добиться этого?

Главный компонент:

 import * as React from 'react'; import { ITimesheetToolProps } from './ITimesheetToolProps'; import { escape } from '@microsoft/sp-lodash-subset'; import TableRow from './TableRow'; export default class TimesheetTool extends React.Component{amp}lt;ITimesheetToolProps, any{amp}gt; { state = { tasks: [] } addTask = (task) ={amp}gt; { const tasks = [...this.state.tasks]; this.setState({tasks: this.state.tasks.concat(task)}); } public render(): React.ReactElement{amp}lt;ITimesheetToolProps, any{amp}gt; { return ( {amp}lt;div{amp}gt; {amp}lt;button onClick={() ={amp}gt; this.addTask}{amp}gt;Add Task{amp}lt;/button{amp}gt; {amp}lt;table{amp}gt; {amp}lt;thead{amp}gt; {amp}lt;th{amp}gt;Project{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Task{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Monday{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Tuesday{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Wednesday{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Thursday{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Friday{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Saaturday{amp}lt;/th{amp}gt; {amp}lt;th{amp}gt;Sunday{amp}lt;/th{amp}gt; {amp}lt;/thead{amp}gt; {amp}lt;tbody{amp}gt; {this.state.tasks.map(task ={amp}gt; {amp}lt;tr key={task}{amp}gt;{amp}lt;TableRow /{amp}gt;{amp}lt;/tr{amp}gt;)} {amp}lt;/tbody{amp}gt; {amp}lt;/table{amp}gt; {amp}lt;/div{amp}gt; ); } } 

Компонент строки таблицы, который будет добавлен в клик:

 import * as React from 'react'; import { ITimesheetToolProps } from './ITimesheetToolProps'; export default class TableRow extends React.Component{amp}lt;ITimesheetToolProps, {}{amp}gt; { public render() { return ( {amp}lt;React.Fragment{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" name="project" /{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="text" name="task" /{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="number" name="mon" /{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="number" name="tues" /{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="number" name="wed" /{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="number" name="thurs" /{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="number" name="fri" /{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="number" name="sat" /{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;td{amp}gt;{amp}lt;input type="number" name="sun" /{amp}gt;{amp}lt;/td{amp}gt; {amp}lt;/React.Fragment{amp}gt; ) } } 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector