在 React 中将表格行添加到表格中答案

【问题标题】：Adding a Table Row into a Table in React在 React 中将表格行添加到表格中
【发布时间】：2020-02-16 00:31:00
【问题描述】：

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

【问题讨论】：

onClick={() => this.addTask(someInitialTaskObj)}，这就是你说的onClick的意思吗？

标签： javascript reactjs typescript react-native

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

谢谢，我在按钮中调用了任务，这解决了我的问题。

【讨论】：