javascript - 在 React 中将表行添加到表中

Question

我是 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<ITimesheetToolProps, any> {
  state = {
    tasks: []
  }

  addTask = (task) => {
    const tasks = [...this.state.tasks];
    this.setState({tasks: this.state.tasks.concat(task)});
  }

  public render(): React.ReactElement<ITimesheetToolProps, any> {
    return (
      <div>
        <button onClick={() => this.addTask}>Add Task</button>
        <table>
          <thead>
            <th>Project</th>
            <th>Task</th>
            <th>Monday</th>
            <th>Tuesday</th>
            <th>Wednesday</th>
            <th>Thursday</th>
            <th>Friday</th>
            <th>Saaturday</th>
            <th>Sunday</th>
          </thead>
          <tbody>
            {this.state.tasks.map(task => <tr key={task}><TableRow /></tr>)}
          </tbody>
        </table>
      </div>
    );
  }
}

要在点击时添加的表格行组件:

import * as React from 'react';
import { ITimesheetToolProps } from './ITimesheetToolProps';

export default class TableRow extends React.Component<ITimesheetToolProps, {}> {
    public render() {
        return (
           <React.Fragment>
               <td><input type="text" name="project" /></td>
               <td><input type="text" name="task" /></td>
               <td><input type="number" name="mon" /></td>
               <td><input type="number" name="tues" /></td>
               <td><input type="number" name="wed" /></td>
               <td><input type="number" name="thurs" /></td>
               <td><input type="number" name="fri" /></td>
               <td><input type="number" name="sat" /></td>
               <td><input type="number" name="sun" /></td>
           </React.Fragment> 
        )
    }
}

Answer 1

问题不在于 React，而在于 JavaScript。您没有正确调用点击处理程序。像这样调用你的处理函数

<button onClick={this.addTask}>Add Task</button>

但是您将在函数中获得的参数将是按钮事件而不是任务。

或调用 task 对象，我在你的组件中看不到它，但我假设来自 props 的某个地方。

<button onClick={() => this.addTask(this.props.task)}>Add Task</button>