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

当单击第二列的“添加”按钮时，要使第一列成为行span；当单击第四列的“添加”按钮时，要使第一列和第二列成为行span。请有人能帮我。。 我试了两天，但我不知道我需要什么。。我第一次使用reactjs

当前结果：

预期结果：

addNewRow=（e）=>{
this.setState（（prevState）=>({
任务列表：[…prevState.taskList，{索引：Math.random（），softwareTable:，任务：，任务注释：，任务状态：'}]，
}));
}
返回(
props.taskList.map（（val，idx）=>{
设softwareTable=`softwareTable-${idx}`，task=`task-${idx}`，taskNotes=`taskNotes-${idx}`，taskStatus=`taskStatus-${idx}`
返回(
props.add（）}type=“button”className=“btn btn主文本中心”>+
props.delete（val））}>-
props.add（）}type=“button”className=“btn btn主文本中心”>+
props.delete（val））}>-
props.add（）}type=“button”className=“btn btn主文本中心”>+
props.delete（val））}>-
悬而未决的
进行中
)
})
)
render（）{
返回(
)
}

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

下面是如何在表中呈现它的基本概念

将+/-按钮放入单元格，单击后插入/删除相应的对象，然后重新渲染组件。 祝你好运：）

const tableData={
项目：[
{
名称：“项目A”，
任务：[
{
名称：“任务A1”，
注：[‘注A1.1’、‘注A1.2’]
},
{
名称：“任务A2”，
注：[‘注A2.1’、‘注A2.2’、‘注A2.3’]
},
{
名称：“任务A3”，
注：[‘注A3.1’]
},
]
},
{
名称：“B项目”，
任务：[
{
名称：“任务B1”，
注：[‘注B1.1’]
}
]
}
]
}
常量映射任务=任务=>{
const notes=task.notes.map（（note，index）=>（{name:note，firstInTask:index==0？task:null}））；
返回{…任务，注释}；
}
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}））；
返回{…项目、任务、注释}；
}
常量映射数据=数据=>{
const projects=data.projects.map（mapProject）；
const notes=projects.reduce（（all，project）=>[…all，…project.notes]）；
返回{…数据、项目、注释}；
};
常量表=（{data}）=>{
const mappedData=mapData（数据）；
log（'MD:'，mappedData）；
返回(
{mappedData.notes.map（note=>(
{note.firstInProject&&
{note.firstInProject.name}
}
{note.firstInTask&&{note.firstInTask.name}
{note.name}
))}
);
}
ReactDOM.render（，document.getElementById（'container'））
td{
边框：1px纯色灰色；
}

谢谢您的回答。我仍然不明白如何在onclick事件中使用map。请查看它的工作原理：非常感谢：）@Momo请将答案标记为正确
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>
)
}