Javascript React Beauty 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',
      taskIds: [],
    },
  },
  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', 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',
      taskIds: [],
    },
  },
  columnOrder: ['column-1', 'column-2', 'column-3'],
};

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, 0, 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, 0, 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;

这个列表有固定的任务，我想让动态，通过表单添加任务，但我不知道怎么做

代码：

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',
      taskIds: [],
    },
  },
  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', 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',
      taskIds: [],
    },
  },
  columnOrder: ['column-1', 'column-2', 'column-3'],
};

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, 0, 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, 0, 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;

从“React”导入React；
从“react dom”导入react dom；
从“样式化组件”导入样式化；
从'dnd'导入{DragDropContext}；
导入“@atlaskit/css reset”；
导入“./styles.css”；
从“./列”导入列；
常量初始数据={
任务：{
'task-1'：{id:'task-1'，内容：'Org.Internacionais'}，
'task-2'：{id:'task-2'，内容：'Ind.Farm.LTDA'}，
'task-3'：{id:'task-3'，内容：'Musc.Sound Live Cmp'}，
},
栏目：{
“第1列”：{
id:'column-1'，
标题：“潜在客户”，
taskIds:['task-1'，'task-2'，'task-3']，
},
“第2列”：{
id:'第2列'，
标题：“护墙板确认”，
taskIds:[]，
},
“第3列”：{
id:'第3列'，
标题：“Reunião Agenda”，
taskIds:[]，
},
},
列顺序：['column-1'、'column-2'、'column-3']，
};
const Container=styled.div`
显示器：flex；
`;
类LeadsComponent扩展了React.Component{
状态=初始数据；
onDragEnd=结果=>{
const{destination，source，draggableId}=result；
如果（！目的地）{
返回；
}
如果(
destination.droppableId==源.droppableId&&
destination.index==source.index
) {
返回；
}
const start=this.state.columns[source.droppableId]；
const finish=this.state.columns[destination.droppableId]；
如果（开始==完成）{
const newTaskIds=Array.from（start.taskIds）；
newTaskIds.拼接（source.index，1）；
newTaskIds.splice（destination.index，0，draggableId）；
常量newColumn={
开始
taskIds:newTaskIds，
};
常数newState={
…这个州，
栏目：{
…此.state.columns，
[newColumn.id]：newColumn，
},
};
this.setState（newState）；
返回；
}
const startTaskIds=Array.from（start.taskIds）；
startTaskIds.拼接（源索引，1）；
const newStart={
开始
taskIds:startTaskIds，
};
const finishTaskIds=Array.from（finish.taskIds）；
finishTaskIds.splice（destination.index，0，draggableId）；
常数newFinish={
…完成，
taskIds:finishTaskIds，
};
常数newState={
…这个州，
栏目：{
…此.state.columns，
[newStart.id]：newStart，
[newFinish.id]：newFinish，
},
};
if（newStart.id=='column-1'&&newFinish.id=='column-3'）{
返回；
}else if（newStart.id=='column-2'&&newFinish.id=='column-1'）{
返回；
}else if（newStart.id=='column-3'&&newFinish.id=='column-2'）{
返回；
}else if（newStart.id=='column-3'&&newFinish.id=='column-1'）{
返回；
}否则{
this.setState（newState）；
}
};
render（）{
返回(
{this.state.columnOrder.map（columnId=>{
const column=this.state.columns[columnId]；
const tasks=column.taskIds.map(
taskId=>this.state.tasks[taskId]，
);
返回；
})}
启动静态背景模式
情态标题
&时代；
接近
理解
);
}
}
导出默认LeadsComponent；

---

在此代码上已经有一个表单，其中包含一个输入和提交！您能帮我解决这个问题吗？

首先，您的州需要一个计数器字段来创建新项目的索引，需要一个文本字段来存储新项目的文本

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' },
  },

然后按照中所述定义处理程序

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

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

;

---

您主要关心的是更新状态的方式，因为它变得复杂了

这是否回答了您的问题？不，没有。我添加了一个答案，正如您所看到的，它与引用的问题非常相似，唯一需要关注的是状态更新，因为您需要找到一种方法，使用id生成任务并将其放置在正确的位置。如果您对这个解决方案仍然有问题，我希望您创建一个codesandbox，以便我可以在答案中提供经过测试的代码