React和学习是我的新手，它通过构建一个简单的时间表应用程序供用户填写，并在提交后将其使用SharePoint API将数据发布到SharePoint列表中（见下文）。

我希望它如何工作 该工具是使用表创建的，每一行都是存储在子组件中的表行。当用户单击“添加任务”按钮时，这将创建一个新的表格行，他们可以在其中添加完成该单独任务的时间。他们可以根据需要添加任意数量的项目，然后单击“提交”按钮，这会将每个任务作为单独的项目提交到Sharepoint列表。

我的问题 在用户添加任务时，然后将文本添加到输入字段。它被传递到父状态，在该状态下将需要提交数据，但这意味着当您在行之一中输入文本时，它将反映在所有行中。当我以本地状态存储数据时，无法将值传递到父状态，因此可以一键提交所有任务，但可以存储唯一值。我想知道是否每行的值都存储在组件本地状态中，所以它们是唯一的，但是要将值传递给父状态，以便可以将它们一起提交？还是您应该在React中处理此问题的正确方法？

代码 因此，我有一个名为TimesheetTool的父组件，其中包括一个空的任务数组和主表（用户要添加到时间表工具的每个任务都作为表行添加）。然后在表主体内部，我映射了tr以便从名为“ TableRow”的子组件中拉出表行。

父组件

import * as React from 'react';
import styles from './TimesheetTool.module.scss';
import { ITimesheetToolProps } from './ITimesheetToolProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { ISpfxReactCrudState } from './ISpfxReactCrudState'; 
import { IListItem } from './IListItem';  
import { SPHttpClient,SPHttpClientResponse } from '@microsoft/sp-http';
import TableRow from './TableRow';


export default class TimesheetTool extends React.Component<ITimesheetToolProps,ISpfxReactCrudState> {
  constructor(props: ITimesheetToolProps,state: ISpfxReactCrudState) {  
      super(props);  

      this.state = {
        project:'',task:'',mon:0,tues:0,wed:0,thurs:0,fri:0,sat:0,sun:0,status: 'Ready',items: [],tasks: []
      };
  }

  handleProjectChange = (event) => {this.setState({project: event.target.value}); console.log('Event:',event.target.value)}
  handletaskChange = (event) => {this.setState({task: event.target.value})};
  handlemonChange = (event) => {this.setState({mon: event.target.value})};
  handleTuesChange = (event) => {this.setState({tues: event.target.value})};
  handleWedChange = (event) => {this.setState({wed: event.target.value})};
  handleThursChange = (event) => {this.setState({thurs: event.target.value})};
  handleFriChange = (event) => {this.setState({fri: event.target.value})};
  handleSatChange = (event) => {this.setState({sat: event.target.value})};
  handleSunChange = (event) => {this.setState({sun: event.target.value})};

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

  handleDelete = (index) => () => this.setState({tasks: this.state.tasks.filter((_,i) => i !== index)})


    public render(): React.ReactElement<ITimesheetToolProps > {  
      const items: JSX.Element[] = this.state.items.map((item: IListItem,i: number): JSX.Element => {  
        return (  
          <li>{item.Title} ({item.Id}) </li>  
        );  
      });  

      return (
        <div>
          <form>
            <button onClick={this.handleAddTask} >Add a Task</button>
            <table classname={styles.table}>
              <thead>
                <tr>
                  <th>Project</th>
                  <th>Task</th>
                  <th>Monday</th>
                  <th>Tuesday</th>
                  <th>Wednesday</th>
                  <th>Thursday</th>
                  <th>Friday</th>
                  <th>Saturday</th>
                  <th>Sunday</th>
                </tr>
              </thead>
              <tbody>
                {this.state.tasks.map((task,index) => 
                  <tr key={index}>
                    <TableRow
                      handleProjectChange={this.handleProjectChange}
                      handletaskChange = {this.handletaskChange}
                      handlemonChange = {this.handlemonChange}
                      handleTuesChange = {this.handleTuesChange}
                      handleWedChange = {this.handleWedChange}
                      handleThursChange = {this.handleThursChange}
                      handleFriChange = {this.handleFriChange}
                      handleSatChange = {this.handleSatChange}
                      handleSunChange = {this.handleSunChange}
                      project={this.state.project}
                      task={this.state.task}
                      mon={this.state.mon}
                      tues={this.state.tues}
                      wed={this.state.wed}
                      thurs={this.state.thurs}
                      fri={this.state.fri}
                      sat={this.state.sat}
                      sun={this.state.sun}
                    />
                    <td><a href="#" onClick={this.handleDelete(index)}>Delete</a></td> 
                  </tr>
                )}
              </tbody>
            </table>
            <div>
            <a href="#" onClick={() => this.createItem()}><span>Submit</span> </a>
            </div> 
          </form>

          <div>  
            {this.state.status}  
            <ul>  
              {items}
            </ul>  
          </div>  
        </div>  
      );  
    }

    private createItem(): void {  
      this.setState({  
        status: 'Creating item...',items: []  
      });  

      const body: string = JSON.stringify({  
        'Title': `Submitted: ${new Date()}`,'Project': `${this.state.project}`,'Task': `${this.state.task}`,'Monday': `${this.state.mon}`,'Tuesday': `${this.state.tues}`,'Wednesday': `${this.state.wed}`,'Thursday': `${this.state.thurs}`,'Friday': `${this.state.fri}`,'Saturday': `${this.state.sat}`,'Sunday': `${this.state.sun}`
      });  

      this.props.spHttpClient.post(`${this.props.siteUrl}/_api/web/lists/getbytitle('${this.props.listName}')/items`,SPHttpClient.configurations.v1,{  
        headers: {  
          'accept': 'application/json;odata=nometadata','Content-type': 'application/json;odata=nometadata','odata-version': ''  
        },body: body  
      })  
      .then((response: SPHttpClientResponse): Promise<IListItem> => {  
        return response.json();  
      })  
      .then((item: IListItem): void => {  
        this.setState({  
          status: `Timesheet Successfully Submitted`,items: []  
        });  
      },(error: any): void => {  
        this.setState({  
          status: 'Error while submitting timesheet' + error,items: []  
        });  
      });  
    }    
}

子组件

import * as React from 'react';
import { Component,createRef } from 'react';
import { ITimesheetToolProps } from './ITimesheetToolProps';
import { ISpfxReactCrudState } from './ISpfxReactCrudState'; 

export default class TableRow extends React.Component<ITimesheetToolProps,ISpfxReactCrudState> {      

    render() {
        return (
            <React.Fragment>
                <td><input type="text" name="project" value={this.props.project} onChange={(event) => this.props.handleProjectChange(event)} /></td>
                <td><input type="textarea" name="task" value={this.props.task} onChange={(event) => this.props.handletaskChange(event)} /></td>
                <td><input type="number" name="mon" value={this.props.mon} onChange={(event) => this.props.handlemonChange(event)} /></td>
                <td><input type="number" name="tues" value={this.props.tues} onChange={(event) => this.props.handleTuesChange(event)} /></td>
                <td><input type="number" name="wed" value={this.props.wed} onChange={(event) => this.props.handleWedChange(event)} /></td>
                <td><input type="number" name="thurs" value={this.props.thurs} onChange={(event) => this.props.handleThursChange(event)} /></td>
                <td><input type="number" name="fri" value={this.props.fri} onChange={(event) => this.props.handleFriChange(event)}/></td>
                <td><input type="number" name="sat" value={this.props.sat} onChange={(event) => this.props.handleSatChange(event)} /></td>
                <td><input type="number" name="sun" value={this.props.sun} onChange={(event) => this.props.handleSunChange(event)} /></td>
            </React.Fragment>        
        )
    }
}