当添加第二列的新行时，第一行是 react.js 中的行跨度

Question

当点击第 2 列的添加按钮时，想要使第 1 列行跨度并且当点击第 4 列的添加按钮时，想要行跨度第 1 列和第 2 列。请有人可以帮助我.. 我尝试了 2 天，但我不知道我需要在哪里.. 我第一次使用 reactjs

当前结果：

预期结果：

addNewRow = (e) => {
        this.setState((prevState) => ({
            taskList: [...prevState.taskList, { index: Math.random(), softwareTable: "", task: "", taskNotes: "", taskStatus: "" }],
        }));
    }

return (
        props.taskList.map((val, idx) => {
            let softwareTable = `softwareTable-${idx}`, task = `task-${idx}`, taskNotes = `taskNotes-${idx}`, taskStatus = `taskStatus-${idx}`
            return (
                <tr key={val.index}>
                    <td>
                        <textarea name="softwareTable" data-id={idx} id={softwareTable} className="form-control " />
                        <button onClick={()=>props.add()} type="button" className="btn btn-primary text-center">+</button>
                        <button className="btn btn-danger" onClick={(() => props.delete(val))} >-</button>
                    </td>
                    <td>
                        <textarea name="task" id={task} data-id={idx} className="form-control " />
                        <button onClick={()=>props.add()} type="button" className="btn btn-primary text-center">+</button>
                        <button className="btn btn-danger" onClick={(() => props.delete(val))} >-</button>
                    </td>
                    <td>
                        <textarea name="taskNotes" id={taskNotes} data-id={idx} className="form-control"></textarea>
                        <button onClick={()=>props.add()} type="button" className="btn btn-primary text-center">+</button>
                        <button className="btn btn-danger" onClick={(() => props.delete(val))} >-</button>
                    </td>
                    <td>
                        <select name="taskStatus" id={taskStatus} data-id={idx} className="form-control" >
                            <option value="pending">Pending</option>
                            <option value="In Progress">In progress</option>
                        </select>
                    </td>

                </tr >
            )
        })
    )

render(){
return (

<tbody>
                                        <TaskList add={this.addNewRow} delete={this.clickOnDelete.bind(this)} taskList={taskList} />
                                        </tbody>
)
}

Answer 1

您显然在这里有一个数据层次结构（项目 -> 任务 -> 注释）。

这是如何在表格中呈现它的基本思路。

将您的+/-按钮放入单元格中，并在点击时插入/删除相应的对象，然后重新渲染组件。 祝你好运:)

const tableData = {
  projects: [
    {
      name: 'Project A',
      tasks: [
        {
          name: 'Task A1',
          notes: ['Note A1.1', 'Note A1.2']
        },
        {
          name: 'Task A2',
          notes: ['Note A2.1', 'Note A2.2', 'Note A2.3']
        },
        {
          name: 'Task A3',
          notes: ['Note A3.1']
        },
      ]
    },
    {
      name: 'Project B',
      tasks: [
        {
          name: 'Task B1',
          notes: ['Note B1.1']
        }
      ]
    }
  ]
}

const mapTask = task => {
    const notes = task.notes.map((note, index) => ({name: note, firstInTask: index === 0 ? task : null}));
  return {...task, notes};
}

const mapProject = project => {
    const tasks = project.tasks.map(mapTask);
  const projectNotes = tasks.reduce((all, task) => [...all, ...task.notes], []);
  const notes = projectNotes.map((note, index) => ({...note, firstInProject: index === 0 ? {...project, count: projectNotes.length} : null}));
  return {...project, tasks, notes};
}

const mapData = data => {
  const projects = data.projects.map(mapProject);
    const notes = projects.reduce((all, project) => [...all, ...project.notes], []);
  return {...data, projects, notes};
};

const Table = ({data}) => {
    const mappedData = mapData(data);
  console.log('MD: ', mappedData);
  
    return (
    <table cellSpacing="10" cellPadding="5">
     <tbody>
      {mappedData.notes.map(note => (
        <tr key={note.name}>
        {note.firstInProject && 
            <td rowSpan={note.firstInProject.count}>
            <span>{note.firstInProject.name}</span>
          </td>}
       {note.firstInTask && <td rowSpan={note.firstInTask.notes.length}>{note.firstInTask.name}</td>}
         <td>{note.name}</td>
        </tr>
      ))}
      </tbody>
    </table>
  );
}

ReactDOM.render(<Table data={tableData} />, document.getElementById('container'));

td {
  border: 1px solid gray;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="container">
</div>