[英]How Can I delete the last row from the table in a form with out other rows with inserted data?
我是這個論壇的新手。 我有問題。 當我從表中刪除最后一行時，其他插入數據的行也被刪除。
這是您必須通過觀察看到的代碼：
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 = 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);
React 中的 Animation：如何使動態表中的表行在刪除時淡出？
[英]Animation in React: how can I make a table row from a dynamic table fade out on delete?
如何在不使用javascript更改表行的情況下，將表row1的表單值替換為表row2的表單值？
[英]How can I swap the form values of table row1 by the form values of table row2 without changing the table rows using javascript?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.