my attempt fiddle here ..........
如何在React.js中动态添加和删除表格行
3
- vicky patel
4
你好 @vicky，有什么问题需要我们帮忙解决吗？请告诉我们具体情况。 - Arnold Gandarillas
这是我的问题截图，@Arnold Gandarillas https://i.stack.imgur.com/KXFot.png - vicky patel
我明白了，我能理解你的问题。我会发布一个答案。 - Arnold Gandarillas
顺便说一句，在像 jsfiddle 这样的地方分享代码肯定是个好主意，但你需要在这里发布代码并解释哪里出了问题以及我们如何帮助你。 - Arnold Gandarillas
4个回答
26
您可以通过操作react状态来实现。在您的情况下，您正在使用嵌套对象，因此在更新它们时需要小心。
修改您的state并不是一个好主意，因为它可能会导致错误或意外行为。
仔细查看handling函数的工作方式。
这里有一个实时演示。
class App extends React.Component {
state = {
rows: []
};
handleChange = idx => e => {
const { name, value } = e.target;
const rows = [...this.state.rows];
rows[idx] = {
[name]: value
};
this.setState({
rows
});
};
handleAddRow = () => {
const item = {
name: "",
mobile: ""
};
this.setState({
rows: [...this.state.rows, item]
});
};
handleRemoveRow = () => {
this.setState({
rows: this.state.rows.slice(0, -1)
});
};
render() {
return (
<div>
<div className="container">
<div className="row clearfix">
<div className="col-md-12 column">
<table
className="table table-bordered table-hover"
id="tab_logic"
>
<thead>
<tr>
<th className="text-center"> # </th>
<th className="text-center"> Name </th>
<th className="text-center"> Mobile </th>
</tr>
</thead>
<tbody>
{this.state.rows.map((item, idx) => (
<tr id="addr0" key={idx}>
<td>{idx}</td>
<td>
<input
type="text"
name="name"
value={this.state.rows[idx].name}
onChange={this.handleChange(idx)}
className="form-control"
/>
</td>
<td>
<input
type="text"
name="mobile"
value={this.state.rows[idx].mobile}
onChange={this.handleChange(idx)}
className="form-control"
/>
</td>
</tr>
))}
</tbody>
</table>
<button
onClick={this.handleAddRow}
className="btn btn-default pull-left"
>
Add Row
</button>
<button
onClick={this.handleRemoveRow}
className="pull-right btn btn-default"
>
Delete Row
</button>
</div>
</div>
</div>
</div>
);
}
}
render(<App />, document.getElementById("root"));
提示：如果我能给你一个建议，我会说你需要更多地学习有关React-JavaScript的知识才能快速前进，现在你需要很好地理解基础知识。
- Arnold Gandarillas
5
3
如果有人在寻找 React Hooks 版本，这是 Arnold 回答的一个示例实现：
import React, { useState } from "react";
const App = () => {
const [rows, setRows] = useState([{}]);
const columnsArray = ["name", "id", "mobile", "date", "amount"]; // pass columns here dynamically
const handleAddRow = () => {
const item = {};
setRows([...rows, item]);
};
const postResults = () => {
console.log(rows); // there you go, do as you please
};
const handleRemoveSpecificRow = (idx) => {
const tempRows = [...rows]; // to avoid direct state mutation
tempRows.splice(idx, 1);
setRows(tempRows);
};
const updateState = (e) => {
let prope = e.target.attributes.column.value; // the custom column attribute
let index = e.target.attributes.index.value; // index of state array -rows
let fieldValue = e.target.value; // value
const tempRows = [...rows]; // avoid direct state mutation
const tempObj = rows[index]; // copy state object at index to a temporary object
tempObj[prope] = fieldValue; // modify temporary object
// return object to rows` clone
tempRows[index] = tempObj;
setRows(tempRows); // update state
};
return (
<div>
<div className="container">
<div className="row clearfix">
<div className="col-md-12 column">
<table className="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th className="text-center"> # </th>
{columnsArray.map((column, index) => (
<th className="text-center" key={index}>
{column}
</th>
))}
<th />
</tr>
</thead>
<tbody>
{rows.map((item, idx) => (
<tr key={idx}>
<td>{idx + 1}</td>
{columnsArray.map((column, index) => (
<td key={index}>
<input
type="text"
column={column}
value={rows[idx][column]}
index={idx}
className="form-control"
onChange={(e) => updateState(e)}
/>
</td>
))}
<td>
<button
className="btn btn-outline-danger btn-sm"
onClick={() => handleRemoveSpecificRow(idx)}
>
Remove
</button>
</td>
</tr>
))}
</tbody>
</table>
<button onClick={handleAddRow} className="btn btn-primary">
Add Row
</button>
<button
onClick={postResults}
className="btn btn-success float-right"
>
Save Results
</button>
</div>
</div>
</div>
</div>
);
};
export default App;
- Gustone Alwanga
2
你对在输入元素上使用的 column 属性感到好奇。那不是一个常规属性。它应该是另一个属性吗？index 也是一样。我对此感到困惑。谢谢。 - MattoMK
@MattoMK 这是一个自定义属性，用于动态确定列，例如名称或ID。 - Gustone Alwanga
2
如果您想动态添加/删除行，可以操作状态，或者如果您使用Redux，可以操作存储库。
这里有一个简单的示例，使用组件的本地状态来添加和删除行： https://codesandbox.io/s/k302jwn44r 编辑：修复了突变状态。
这里有一个简单的示例，使用组件的本地状态来添加和删除行： https://codesandbox.io/s/k302jwn44r 编辑：修复了突变状态。
import React from "react";
import { render } from "react-dom";
const styles = {
fontFamily: "sans-serif",
textAlign: "left"
};
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
rows: []
};
}
handleAddRow = () => {
this.setState((prevState, props) => {
const row = {content: "hello this is a new row!" };
return { rows: [...prevState.rows, row] };
});
};
handleRemoveRow = () => {
this.setState((prevState, props) => {
return { rows: prevState.rows.slice(1) };
});
};
render() {
console.log(this.state);
return (
<div style={styles}>
<table>
<tbody>
{this.state.rows.map(row => (
<tr>
<td>{row.content}</td>
</tr>
))}
<tr>
<td className="" onClick={this.handleAddRow}>
(+)
</td>
{Boolean(this.state.rows.length) && (
<td onClick={this.handleRemoveRow}>(-)</td>
)}
</tr>
</tbody>
</table>
</div>
);
}
}
render(<App />, document.getElementById("root"));
- Ignacio
1
1@ArnoldGandarillas 嗯，已修复。 - Ignacio
0
感谢上面的答案。 对于“handleChange”的处理，我想发表一点意见。 我们需要修改以下内容吗？
rows[idx] = {
[name]: value
};to the following for saving the data into rows:
const rowInfo = rows[idx];
rowInfo[name] = value;- Software-security-is-not-free
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接