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

要在onClick中添加的表行组件：

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 对象调用，我无法在您的组件中看到该对象，但我认为它来自道具。

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

Answer 2

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

在React中将表行添加到表中

2 个答案: