问题描述
我正在使用 html 表和 react-beautiful-dnd 库来构建拖放。 它工作正常，但表格行在拖动它时失去了样式。 表 tbody 标签也在从材料 ui 插入圆形进度条时出现问题。但是当我使用用 div 的进度条制作的表格时，它工作正常。
有没有人对此有任何想法。
<DragDropContext
onDragEnd={(param) => {
const srcI = param.source.index;
const desI = param.destination?.index;
if (desI) {
tasksList.splice(
desI,tasksList.splice(srcI,1)[0]
);
Tasks.saveList(tasksList);
// console.log("onDragEnd:",param);
}
}}
>
<table>
<thead>
<div className="table-drop">
<span
className="circle link"
onClick={() =>
this.handleTableDrop("table" + i)
}
>
{/* <p className={table1 === true ? `rotate` : ``}> */}
<p
className={
dropTables["table" + i] === true
? `rotate`
: ``
}
>
<i class="fa fa-caret-right"></i>
</p>
</span>
</div>
<tr>
<th className="firstTh"></th>
<th>
<p className="tableContent">
{/* ============ */}
{!this.state.touchedMilestone[
row.title
] ? (
<div
onClick={() =>
this.handletouchMilestone(
row.title
)
}
className={
this.state.allowEdit
? `link projectTitleFont`
: `false projectTitleFont`
}
>
{row.title}
</div>
) : (
<div className="edit-Box ">
<input
type="text"
name={row.title}
className="sm-form-control inputClass"
onChange={(e) =>
this.editMilestoneChange(e)
}
onKeyPress={(e) =>
this.onKeyPress_EditMile(
e,row.title
)
}
defaultValue={row.title}
value={
this.state.editMilestoneData[
row.title
]
}
autoFocus
/>
</div>
)}
{/* ============== */}
</p>
<p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-check2-circle"
viewBox="0 0 16 16"
>
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z" />
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
</svg>
<img
src={iIcon}
alt=""
onClick={() =>
this.openMilestoneInfo()
}
className="link"
/>
</p>
</th>
<th>Assignee</th>
<th>Priority</th>
<th>Platform</th>
<th>Status</th>
</tr>
</thead>
<Droppable droppableId={"droppable" + row.id}>
{(provided,snapshot) => (
<tbody
className={
dropTables["table" + i] === true
? ``
: `display-none`
}
ref={provided.innerRef}
{...provided.droppableProps}
>
{tasksList.map((row,i) => {
return (
<Draggable
key={row.id}
draggableId={
"draggable-" + row.id
}
index={i}
>
{(provided,snapshot) => (
<tr
key={row.id}
ref={provided.innerRef}
{...provided.draggableProps}
style={{
...provided.draggableProps
.style,BoxShadow: snapshot.isDragging
? "0 0 .4rem #666"
: "none",cursor: "grabbing",// position: "static",}}
{...provided.dragHandleProps}
>
<td className="bodyFirstTh">
{this.state.checkBoxHover[
`table` + i
] === true ? (
<input
type="checkBox"
onMouSEOut={() =>
this.handleCheckBoxHoverOut(
"table" + i
)
}
/>
) : (
<div
className="yellow-strip"
onMouSEOver={() =>
this.handleCheckBoxHover(
"table" + i
)
}
></div>
)}
</td>
<td className="milestoneTabletd2">
<p>{row.name}</p>
<p>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-check2-circle"
viewBox="0 0 16 16"
>
<path d="M2.5 8a5.5 5.5 0 0 1 8.25-4.764.5.5 0 0 0 .5-.866A6.5 6.5 0 1 0 14.5 8a.5.5 0 0 0-1 0 5.5 5.5 0 1 1-11 0z" />
<path d="M15.354 3.354a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0l7-7z" />
</svg>
{/* <CommonCircularProgress /> */}
<img
src={iIcon}
alt=""
onClick={() =>
this.openTaskInfo()
}
className="link"
/>
</p>
</td>
<td className="AssigneeImg">
<img
src={circulImg}
alt=""
/>
</td>
<td
className="pink"
style={{
width: "150px",}}
>
{/* medium */}
<CommonMenu
trigger="Medium"
popData={
<PriorityPopup />
}
width="100px"
/>
</td>
<td className="yellow">
<CommonMenu
trigger="React"
popData={
<PlatformPopup />
}
width="100px"
/>
</td>
<td className="blue">
{/* Active */}
<CommonMenu
trigger="Active"
popData={<StatusPopup />}
width="100px"
/>
</td>
</tr>
)}
</Draggable>
);
})}
{provided.placeholder}
</tbody>
)}
</Droppable>
<tfoot
className={
dropTables["table" + i] === true
? ``
: `display-none`
}
>
<tr>
<td
style={{ background: "#191b34" }}
></td>
<td className="link">
{addTask["table" + i] ? (
<>
<input
type="text"
name="name"
className="sm-transparent-input"
placeholder="+ Add"
autoFocus
value={addTaskData.name}
onChange={(e) =>
this.handleAddTask(e)
}
ref={this.addInput}
onKeyPress={(e) =>
this.onKeyPress_Task(e)
}
/>
</>
) : (
<>
<p
className="Addtable"
onClick={() =>
this.showTableInput("table" + i)
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
fill="currentColor"
class="bi bi-plus"
viewBox="0 0 16 16"
>
<path d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z" />
</svg>
Add
</p>
</>
)}
</td>
<td></td>
<td></td>
<td></td>
<td className="addBtn">
{addTask["table" + i] ? (
<>
<button
onClick={() =>
this.onSubmitAddTask()
}
style={{
cursor: "pointer",}}
ref={this.addTaskBtn}
>
+
</button>
</>
) : (
<></>
)}
</td>
</tr>
</tfoot>
</table>
</DragDropContext>
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）