javascript - 在 React 中将表格行添加到表格中
问题描述
我是 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>
)
}
}
解决方案
问题不在于 React,而在于 JavaScript。您没有正确调用点击处理程序。像这样调用你的处理函数
<button onClick={this.addTask}>Add Task</button>
但是您将在函数中获得的参数将是按钮事件而不是任务。
或使用我在您的组件中看不到的任务对象进行调用,但我假设来自道具的某个地方。
<button onClick={() => this.addTask(this.props.task)}>Add Task</button>
推荐阅读
- node.js - Microsoft Azure 自定义视觉 API nodeJS-classifyImageUrl() 错误“BadRequestImageUrl”
- ios - 在 iOS 中与朋友进行实时游戏配对
- c# - 在未知 DbSet 上调用方法“Find”会抛出:“对象与目标不匹配。”
- html - 将多个html文件合并为一个
- r - R ggplot 以网格格式绘制 geom_points
- javascript - 无法使用 $q 和 promise
- java - entityManager.persist() 在 servlet 中工作,但不在单独的类中
- laravel - Bootstrap 使用 Objects 作为标签输入的标签输入免费输入不起作用
- git - 构建服务器 git 镜像
- javascript - 多边形未绘制 // 表示变量不存在,但控制台中没有返回错误