我有一个如下数组：
[{MAP: "RTO", PNR: "OCYH", ID: "7311ba56-730a-478e-af6e-607d8dee6b0c", Number: "76809", checked: false}
{MAP: "RTO", PNR: "OCYH", ID: "280515e8-22e1-4365-92a5-20b8e5b8b62d", Number: "87661821", checked: false}
{MAP: "RTO", PNR: "ISMP", ID: "80f71c18-b530-46ca-9acb-798f73dcdde3", Number: "6343279", checked: false}
{MAP: "RTO", PNR: "ISMP", ID: "a9c607a3-d2f9-4643-822b-b9f25c229b92", Number: "5483292", checked: false}
{MAP: "RTO", PNR: "ISMP", ID: "e938c2c9-6eb9-472f-8e3a-d4529fd55f16", Number: "67698094", checked: false}
{MAP: "RTO", PNR: "ISMP", ID: "55ea118b-beea-4407-84cf-3aebc98bffd2", Number: "15201901", checked: false}
{MAP: "RTO", PNR: "TNAT", ID: "387b3710-901d-45f2-a38b-b875237e1210", Number: "15201902", checked: false}]
基于复选框的点击值，选中的更改的值。
我正在尝试将所有已检查的true值添加到数组中，并在检查结果变为false的情况下删除该值。我曾使用splic这样做，但并没有删除正确的ID。
var singleTransactionCollection=[];
constructor(){
super()
this.state={
singleCheckedList:[]
}
}
handleCheckbox = (Id, checked) => {
if (checked) {
singleTransactionCollection.push(this.state.items.filter(obj => {
return obj.ID ==transactionId
}));
this.setState({ singleCheckedList: singleTransactionCollection});
} else {
this.state.singleCheckedList.splice(this.state.singleCheckedList.findIndex(item => ID !== transactionId), 1)//Not returning the expected result
this.setState({ singleCheckedList: singleTransactionCollection });
}
this.setState({
items: this.state.items.map(item => {
return {
...item,
checked:
item.ID === transactionId ? !item.checked : item.checked
};
})
});
};
render(){
return(
<div>
<Table>
<thead>
<tr>
<th>
<div class="row">
<div class="col-md-2">
<input
onChange={this.selectAll}
type="checkbox"
checked={this.state.selectAll}
/>
</div>
</div>
</th>
<th>TransactionId</th>
<th>PNR</th>
<th>Source</th>
<th>InvoiceNo</th>
</tr>
</thead>
<tbody>
{items
.map((item, i) => (
<tr key={i}>
<td id="col1" align="center">
<input
type="checkbox"
checked={item.checked ? true : ""}
onChange={this.handleCheckbox.bind(
this,
item.ID,
!item.checked
)}
/>
</td>
<td id="col1" align="center">
{item.ID}
</td>
<td id="col2" align="center">
{item.PNR}
</td>
<td id="col5" align="center">
{item.MAP}
</td>
<td id="col6" align="center">
{item.Number}
</td>
</tr>
))}
</tbody>
</Table>
</div>
)
}
我的删除项目的Java脚本功能在实现为true后被选中为false时无法正常工作。
任何我要去哪里的建议。谢谢！！
答案 0 :(得分：1)
通常，您可能不想直接从状态中拼接数组（使用不可变原理进行反应）。
另外，您可能不应该经常修改全局数组。使用传播功能，您可以创建this.state.singleCheckedList的副本并免费使用。
constructor(props) {
super(props); // I know you aren't using any props in this class but as a best practice, you should pass the props in your ctor so you won't forget
this.state={
singleCheckedList: [],
items: [
{MAP: "RTO", PNR: "OCYH", ID: "7311ba56-730a-478e-af6e-607d8dee6b0c", Number: "76809", checked: false},
{MAP: "RTO", PNR: "OCYH", ID: "280515e8-22e1-4365-92a5-20b8e5b8b62d", Number: "87661821", checked: false},
{MAP: "RTO", PNR: "ISMP", ID: "80f71c18-b530-46ca-9acb-798f73dcdde3", Number: "6343279", checked: false},
{MAP: "RTO", PNR: "ISMP", ID: "a9c607a3-d2f9-4643-822b-b9f25c229b92", Number: "5483292", checked: false},
{MAP: "RTO", PNR: "ISMP", ID: "e938c2c9-6eb9-472f-8e3a-d4529fd55f16", Number: "67698094", checked: false},
{MAP: "RTO", PNR: "ISMP", ID: "55ea118b-beea-4407-84cf-3aebc98bffd2", Number: "15201901", checked: false},
{MAP: "RTO", PNR: "TNAT", ID: "387b3710-901d-45f2-a38b-b875237e1210", Number: "15201902", checked: false}
] // You tried to reference your items list from the state but you didn't actually declare it as part of your class
};
}
/*
1. In your code you referenced transactionId so I assume you meant to put that here instead of Id
2. I also added the itemIndex here so you won't need to traverse the entire items array again to change the checkedState
*/
handleCheckbox = (transactionId, checked, itemIndex) => {
const items = [...this.state.items]; // Using the spread function (...) I can crate a duplicate of the original array to manipulate freely
const arrayToManipulate = [...this.state.singleCheckedList]; // Again, using the spread function
items[itemIndex].checked = checked; // Now that we have the passed index you don't need to check that you are at the right item in order to change the checked status, just insert the new status
if (checked) {
arrayToManipulate.push(items[itemIndex]);
} else {
const index = arrayToManipulate.findIndex(item => item.ID === transactionId); // You are trying to find the matching index, so you should be checking for a matching pair ===
arrayToManipulate.splice(index, 1);
}
this.setState({ singleCheckedList: arrayToManipulate, items }); // React is smart, it will try to minimize the amount of times it touches the state, so combining your changes together will make sure you get the expected result
};
render() {
const { items } = this.state; // You referenced items in here while never actually bringing it from the state like you did in your handle function
return(
<div>
<Table>
<thead>
<tr>
<th>
<div class="row">
<div class="col-md-2">
<input
onChange={this.selectAll}
type="checkbox"
checked={this.state.selectAll}
/>
</div>
</div>
</th>
<th>TransactionId</th>
<th>PNR</th>
<th>Source</th>
<th>InvoiceNo</th>
</tr>
</thead>
<tbody>
{
items.map((item, i) => (
<tr key={i}>
<td id="col1" align="center">
<input
type="checkbox"
checked={item.checked} // the checked propery is a boolean, you might as well just pass it seeing as you are changing it in your handle function
onChange={this.handleCheckbox.bind(this, item.ID, !item.checked, i)} // Notice I added the item index prop
/>
</td>
<td id="col1" align="center">
{item.ID}
</td>
<td id="col2" align="center">
{item.PNR}
</td>
<td id="col5" align="center">
{item.MAP}
</td>
<td id="col6" align="center">
{item.Number}
</td>
</tr>))
}
</tbody>
</Table>
</div>
)
}