javascript - 将输入值保存在本地状态，但传递给父级以提交表单

问题描述

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

标签： javascriptreactjsformsparent-childreact-state

我认为您需要做一些关注点分离，其中 Parent 将管理您的任务列表，而 Child 组件将处理每个任务。像下面这样的东西应该适合你。

// Parent

export default class TimesheetTool extends React.Component<ITimesheetToolProps, ISpfxReactCrudState> {
  ...
  onUpdateTask = (index, item) => {
    this.setState(prevState => ({
      task: prevState.task.map((task, i) => {
        return index === i ? item : task
      })
    })
  }
  ...
  render () {
    ...
    {this.state.tasks.map((task, index) => 
      <tr key={index}>
        <TableRow index={index} onUpdateTask={this.onUpdateTask} /> // pass down a callback
      </tr>
    )}
    ...
  }
})

// Child

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

  constructor() {
    this.state = {
      project:'',
      task:'',
      mon:0,
      tues:0,
      ...
    };
  }

  onChange = (event) => {
    const { name, value } = event.target
    this.setState({
      [name]: value,
    }, () => {
      this.props.onUpdateTask(this.props.index, this.state) // call the parent that the task of this index has changed
    })
  }

  render() {
    return (
      <React.Fragment>
        <td><input type="text" name="project" value={this.state.project} onChange={this.onChange} /></td>
        <td><input type="textarea" name="task" value={this.state.task} onChange={this.onChange} /></td>
        <td><input type="number" name="mon" value={this.state.mon} onChange={this.onChange} /></td>
        <td><input type="number" name="tues" value={this.state.tues} onChange={this.onChange} /></td>
        ...
      </React.Fragment>        
    )
  }
}

javascript - 将输入值保存在本地状态，但传递给父级以提交表单

问题描述

解决方案

推荐阅读