React-beautiful-dnd-动态待办事项，可以添加表单中的项目

问题描述

我如何让待办事项动态化，并且可以添加添加到表单中的项目？

这是我的列表：

const initialData = {
  tasks: {
    'task-1': { id: 'task-1',content: 'Org.Internacionais' },'task-2': { id: 'task-2',content: 'Ind.Farm.LTDA' },'task-3': { id: 'task-3',content: 'Musc.sound Live Cmp' },},columns: {
    'column-1': {
      id: 'column-1',title: 'Cliente em Potencial',taskIds: ['task-1','task-2','task-3'],'column-2': {
      id: 'column-2',title: 'Dados Confirmados',taskIds: [],'column-3': {
      id: 'column-3',title: 'Reunião Agendada',columnorder: ['column-1','column-2','column-3'],};

此列表中有固定的任务，我想让它动态化，通过表单添加任务，但我不知道该怎么做！

代码：

import React from 'react';
import ReactDOM from 'react-dom';
import styled from 'styled-components';
import { DragDropContext } from 'react-beautiful-dnd';

import '@atlaskit/css-reset';
import './styles.css';

import Column from './column';

const initialData = {
  tasks: {
    'task-1': { id: 'task-1',};

const Container = styled.div`
  display: flex;
`;

class LeadsComponent extends React.Component {
  state = initialData;

  onDragEnd = result => {
    const { destination,source,draggableId } = result;

    if (!destination) {
      return;
    }

    if (
      destination.droppableId === source.droppableId &&
      destination.index === source.index
    ) {
      return;
    }

    const start = this.state.columns[source.droppableId];
    const finish = this.state.columns[destination.droppableId];

    if (start === finish) {
      const newTaskIds = Array.from(start.taskIds);
      newTaskIds.splice(source.index,1);
      newTaskIds.splice(destination.index,draggableId);

      const newColumn = {
        ...start,taskIds: newTaskIds,};

      const newState = {
        ...this.state,columns: {
          ...this.state.columns,[newColumn.id]: newColumn,};
      this.setState(newState);
      return;
    }

    const startTaskIds = Array.from(start.taskIds);
    startTaskIds.splice(source.index,1);
    const newStart = {
      ...start,taskIds: startTaskIds,};

    const finishTaskIds = Array.from(finish.taskIds);
    finishTaskIds.splice(destination.index,draggableId);
    const newFinish = {
      ...finish,taskIds: finishTaskIds,};

    const newState = {
      ...this.state,columns: {
        ...this.state.columns,[newStart.id]: newStart,[newFinish.id]: newFinish,};
    if (newStart.id == 'column-1' && newFinish.id == 'column-3') {
      return;
    } else if (newStart.id == 'column-2' && newFinish.id == 'column-1') {
      return;
    } else if (newStart.id == 'column-3' && newFinish.id == 'column-2') {
      return;
    } else if (newStart.id == 'column-3' && newFinish.id == 'column-1') {
      return;
    } else {
      this.setState(newState);
    }
  };

  render() {
    return (
      <>
        <DragDropContext onDragEnd={this.onDragEnd}>
          <Container>
            {this.state.columnorder.map(columnId => {
              const column = this.state.columns[columnId];
              const tasks = column.taskIds.map(
                taskId => this.state.tasks[taskId],);

              return <Column key={column.id} column={column} tasks={tasks} />;
            })}
          </Container>
        </DragDropContext>
        <button
          type="button"
          class="btn btn-primary"
          data-toggle="modal"
          data-target="#staticBackdrop"
        >
          Launch static backdrop modal
        </button>

        <div
          class="modal fade"
          id="staticBackdrop"
          data-backdrop="static"
          data-keyboard="false"
          tabindex="-1"
          aria-labelledby="staticBackdropLabel"
          aria-hidden="true"
        >
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">
                  Modal title
                </h5>
                <button
                  type="button"
                  class="close"
                  data-dismiss="modal"
                  aria-label="Close"
                >
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              <div class="modal-body">
                <form>
                  <input type="text" id="content" className="teste" />
                  <input type="submit" value="Submit" />
                </form>
              </div>
              <div class="modal-footer">
                <button
                  type="button"
                  class="btn btn-secondary"
                  data-dismiss="modal"
                >
                  Close
                </button>
                <button type="button" class="btn btn-primary">
                  Understood
                </button>
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}

export default LeadsComponent;

在此代码上已经有一个带有一个输入并提交的表单！您能帮我解决这个问题吗？

解决方法

首先，您的州需要一个counter字段为新项目创建索引，并需要一个text字段来存储新项目的文本。

const initialData = {
  count: 3,newTask: '',tasks: {
    'task-1': { id: 'task-1',content: 'Org.Internacionais' },'task-2': { id: 'task-2',content: 'Ind.Farm.LTDA' },'task-3': { id: 'task-3',content: 'Musc.Sound Live Cmp' },},

然后按照question I commented

所述定义处理程序

inputChangeHandler = ({ target: { value } }) =>
  this.setState({
    newTask: value,});

submitHandler = e => {
  e.preventDefault();
  this.setState(prevState => {
    // increment task count
    const newCount = prevState.count + 1;
    // create new id based on task count
    const newId = `task-${newCount}`;
    return {
      count: newCount,// clear input
      newTask: '',tasks: {
        // add to tasks array
        ...prevState.tasks,[newId]: { id: newId,content: prevState.newTask },// add task id at the end of first column
      columns: {
        ...prevState.columns,'column-1': {
          ...prevState.columns['column-1'],taskIds: [...prevState.columns['column-1'].taskIds,newId],};
  });
};

并将处理程序传递给表单组件

<form onSubmit={this.submitHandler}>
  <input
    type="text"
    id="content"
    className="teste"
    value={this.state.newTask}
    onChange={this.inputChangeHandler}
  />
  <input type="submit" value="Submit" />
</form>;

您最关心的是因为状态变得复杂而更新状态的方式