javascript - 转到下一页时表格行消失
问题描述
我是新来的反应。我正在使用 addrow 方法将值添加到使用 {this.state.rows.map} 创建的表中。该表显示输入字段的值。但是,在按下继续按钮转到下一页然后通过按下后退按钮从页面返回时,该行会消失。
这是代码:
<Grid item xs={10} direction="row" alignItems="center">
<table
className="table table-bordered table-hover"
id="tab_logic"
>
<thead>
{this.state.rows.length > 0 ? (
<tr>
<th className="text-center"> # </th>
<th className="text-center"> KPI </th>
<th className="text-center"> UOM </th>
<th className="text-center"> Base </th>
<th className="text-center"> Target </th>
<th className="text-center"> Target Date </th>
<th className="text-center"> Delete Row </th>
</tr>
) : null}
</thead>
<tbody>
{this.state.rows.map((item, idx) => (
<tr id="addr1" key={idx}>
<td>{idx + 1}</td>
<td>
<input
type="text"
name="Kpi_Before"
defaultValue={Kpi_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
readOnly
/>
</td>
<td>
<input
type="text"
name="UOM_Before"
defaultValue={UOM_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
readOnly
/>
</td>
<td>
<input
type="text"
name="Base_Before"
defaultValue={Base_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
readOnly
/>
</td>
<td>
<input
type="text"
name="Target_Before"
defaultValue={Target_Before}
onChange={this.handleChangeRows(idx)}
className="form-control"
readOnly
/>
</td>
<td>
<input
type="text"
name="dateTime"
defaultValue={dateTime}
onChange={this.handleChangeRows(idx)}
className="form-control"
readOnly
size="38"
/>
</td>
<td>
更改和前后移动的代码是这样的:
continue = e => {
e.preventDefault();
this.props.nextStep();
}
};
back = e => {
e.preventDefault();
this.props.prevStep();
};
handleChangeRows = idx => e => {
const { name, value } = e.target;
const rows = [...this.state.rows];
rows[idx] = {
[name]: value
};
this.setState({
rows
});
};
handleAddRow = () => {const item = {
Kpi_Before: [],
UOM_Before: "",
Base_Before: "",
Target_Before: "",
dateTime: "",
rows:[]
};
this.setState({
rows: [...this.state.rows, item]
});
}
};
nextStep = () => {
const { step } = this.state;
this.setState({
step: step + 1
});
};
//Go back to previous step
prevStep = () => {
const { step } = this.state;
this.setState({
step: step - 1
});
};
如何防止行消失并保持前后移动不变?
解决方案
当您在页面之间导航或刷新时,您的状态会重新呈现,这意味着状态内的所有内容都将丢失以应对此问题,您可以:
1) 使用 redux 存储更改并从那里检索数据。
2) 使用与 redux 相同但内置的 Context API 来响应。
3) 使用 REST API,这意味着有某种后端来存储值并在组件挂载时获取它们。
推荐阅读
- angularjs - 发送 POST 请求奇怪的问题
- javascript - 为什么 JavaScript 跟踪器使用 img 标签而不是 XMLHttpRequest?
- php - 不从 db 获取所有产品
- ssh - 访问云代工文件系统(如 FTP)?
- groovy - 如何将字符串转换为 Groovy 中的现有对象?
- python - 如何使用记录器在特定日志文件中打印,而不在龙卷风应用程序的主管日志文件中打印
- react-native - 使用 react native、redux 对喜欢/不喜欢和喜欢计数进行乐观更新
- text - 组织模式导出到文本:使用 HTML 标签导出的引文
- android - 从 uri 的 Arraylist 在列表视图中显示图像
- blockchain - 链上和已安装的智能合约有什么区别?