javascript - 如何从表格中删除表格中的最后一行,而没有插入数据的其他行?
问题描述
我是这个论坛的新手。我有问题。当我从表中删除最后一行时,插入数据的其他行也被删除。
这是您必须通过观察看到的代码:
const selector = formValueSelector('bill'); //initializating a selector. bill is the name of
// the form.
然后就在该代码行的下方:
const selector = formValueSelector('bill');
我有一个名为 Detail 的类组件:
class Detail extends Component{
//In the FOLLOWING LINES I'm changing props of calculated subtotal called as
//"isSubtotal"
componentDidUpdate(prevProps, index) {
if (this.props.isSubtotal !== prevProps.isSubtotal) {
this.props.dispatch(
//bill is the name of the form. Changing subtotal detail with dynamic index.
//this.props.index is the dynamic index and this.props.isSubtotal is calculated
//value
change('bill', `detail[${this.props.index}].subtotal`, this.props.isSubtotal)
);
}
}
//HERE I'm rendering Detail's component
render(){
const{detailItem,index,fields,isSubtotal} = this.props;
return(
<tr key={index}>
<td>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.quantity`}
type='number'
component= {UtilityQuantity}
placeholder= '...quantity'
// label = "Quantity"
/>
</td>
<td>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.product.code`}
type="number"
component= {UtilityCode}
placeholder='...Product's code'
//label = "Product's code"
/>
</td>
<td>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.product.name`}
type="text"
component= {UtilityName}
placeholder='...product's name'
// label = "Product's name"
/>
</td>
<td>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.product.price`}
type="number"
component= {UtilityPrice}
placeholder= '...Price'
// label = "Product's price"
/>
</td>
<td>
<Field
id={`${detailItem}._id`}
name={`${detailItem}.subtotal`}
component= {UtilitySubtotal}
placeholder= '...subtotal'
// label = "Subtotal"
>
{isSubtotal}
</Field>
</td>
</tr>
);
}
}
这是在迭代时包含 DetailComponent 的 RenderDetail:
const RenderDetail = ({fields, meta: { error,submitFailed}}) => {
return(
<dl>
<b> Detail: </b>
<dt>
{/*When Clicking on Add Detail Add each row to the table "detail"*/}
<button type="button" className= 'btn btn-primary' onClick={() =>
fields.push()}>Add Detail</button>
{submitFailed && error && <span>{error}</span>}
</dt>
<div className='table-responsive'>
<table className='table table-striped table-sm'>
{/*Here I'm declaring the columns of the table*/}
<thead>
<tr>
<th>Quantity</th>
<th>Product's code</th>
<th>Product's name</th>
<th>Product's price</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody>
{/*HERE inside tbody tag I'm getting fields from every detail item*/}
{ fields.map((registerDetail, index) =>
{/*Detail is the class Component*/}
<Detail detailItem={registerDetail} fields={fields} index={index} key={index} />
)}
</tbody>
</table>
</div>
{error && <dt className="error">{error}</dt>}
<button className='btn btn-light mr-2'
type="button"
title="Remove Detail"
onClick={() =>{
//THIS FOLLOWING line I'm assign the index from last row to selectedIndex
let selectedIndex = fields.length - 1;
//HERE IS THE KEY LINE you must pay attention
fields && fields.remove(selectedIndex);
}}>
Delete Detail
</button>
</dl>
)};
在这里,我正在使用 redux 表单初始化我的详细组件:
//INITIALIZATING DETAIL COMPONENT FORM
Detail = reduxForm({
form: 'bill',
validate
})(Detail);
在这里,我连接了 Detail Component 并绑定了 reducer 和 action。理论上,表格形式应该保存在状态中。
Detail = connect((state,props,fields) =>{
const quantity = selector(state,`${props.detailItem}.quantity`);
const price = selector(state,`${props.detailItem}.product.price`);
return{
isSubtotal: quantity * price
}
},{})(Detail)
我将向您解释它是如何工作的。当我单击添加详细信息时,我添加了一行。例如,我添加了 5 行。
And e.g I insert 10 in quantity and 20 in price on first row and I've got 200 in subtotal field. Subtotal is not editable. It's calculated.
Now, in second row I insert 10 in quantity and 10 in price and I've got 100 in subtotal. The other rows are empty. The data form should be like this:
row 1 : {quantity: 10, product: {code: 13321, name: "product 1",
price: 20}, subtotal: 200},
row 2 : {quantity: 10, product: {code: 12222, name: "product 2",
price: 10}, subtotal: 100}
row 3 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
row 4 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
row 5 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
the expected behavior is When I'm deleting last row, row 5 in this case, the data I'm showing on screen should be like this:
row 1 : {quantity: 10, product: {code: 13321, name: "product 1",
price: 20}, subtotal: 200},
row 2 : {quantity: 10, product: {code: 12222, name: "product 2",
price: 10}, subtotal: 100}
row 3 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
row 4 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
但真正的输出是我删除最后一行的时候。在这种情况下,第 5 行、第 1 行和第 2 行也被删除。我有下一个输出:
row 3 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
row 4 : {quantity: null, product: {code: null, name: null,
price: null}, subtotal: null}
我不仅删除了表格的最后一行,而且我插入的值的行也被删除了。
有人能想出解决这个问题的办法吗?
我该如何解决这个问题?
解决方案
理解您的代码有点困难。repl.it 是一种更好的方式来展示你的工作,以便快速理解。无论如何,我认为您应该使用 split 来删除带有索引的目标数组。
field.splice(selectedIndex, 1);
推荐阅读
- python - 为什么我放入 library.zip pygame 后找不到 freesansbold.ttf
- java - 单击按钮时更新类变量
- scala - 从 HDFS 读取文件,Scala Spark
- redirect - 春季安全奇怪的重定向
- python - 如何将函数的结果存储到具有相关列的数据框
- javascript - 避免异步页面冻结对象循环
- unity3d - Unity 为什么当我创建新图块并拖动调色板中的图块集时,它会合并在一起?
- javascript - React:存储 JWT
- javascript - Vue JS - 返回后调用函数
- postgresql - 如何在 Postgresql 日期之间进行选择并列出所有这些日期