Reactjs 只在按下add按钮时循环一次表格标题，react js_Reactjs

Reactjs 只在按下add按钮时循环一次表格标题，react js

reactjs

Reactjs 只在按下add按钮时循环一次表格标题，react js,reactjs,Reactjs,在这里，当我按下加号按钮时，标题也会被打印…我如何循环它，使标题只为页面打印一次。最初，页面需要为空，标题和“hello this a new row！”应在第一次单击时显示，第二次和之后每隔一次单击时仅显示“hello this a new row！” 从“React”导入React；从“react dom”导入{render}；常量样式={ fontFamily：“无衬线”， textAlign：“左” }; 类应用程序扩展了React.Component{ 建造师（道具）{ 超级（道

在这里，当我按下加号按钮时，标题也会被打印…我如何循环它，使标题只为页面打印一次。最初，页面需要为空，标题和“hello this a new row！”应在第一次单击时显示，第二次和之后每隔一次单击时仅显示“hello this a new row！”

从“React”导入React；
从“react dom”导入{render}；
常量样式={
fontFamily：“无衬线”，
textAlign：“左”
};
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
行：[]
};
}
handleAddRow=（）=>{
this.setState（（prevState，props）=>{
const row1={content:“heading”}；
const row={content:“您好，这是一个新行！”}；
返回{rows:[…prevState.rows，row1，row]}；
});
};
handleRemoveRow=（）=>{
this.setState（（prevState，props）=>{
返回{rows:prevState.rows.slice（1）}；
});
};
render（）{
console.log（this.state）；
返回(
{this.state.rows.map（row=>(
{row.content}
))}
(+)
{Boolean（this.state.rows.length）&&(
(-)
)}
);
}
}
render（，document.getElementById（“根”））；

您的添加句柄行方法应该如下所示

handleAddRow = () => {
this.setState((prevState, props) => {
  const row1 = { content: "heading" };
  const row = { content: "hello this is a new row!" };
  return { rows: [...prevState.rows, row] };
});

})

构造函数必须是这样的

constructor(props) {
super(props);
this.state = {
  rows: ["Header"]
}

刚刚根据您的需要更新了沙盒

好的

this.state.rows开始为空，因为您不希望在开头显示任何内容

每次单击加号按钮时，我们都会添加一些东西，因此称为handleAddRow

每次调用handleAdd行时，它都会检查this.state.rows的长度，如果状态为空，它会准备一个变量添加标题，如果不是，它会准备一个变量添加行

它通过this.setState方法将准备好的变量添加到this.state

如果这不够清楚，请告诉我