[英]The value of the checkbox is added to the array but the checkbox is not checked
I have checked two checkboxes. 我已经选中了两个复选框。 I can unchecked them, but i can't again checked them. 我可以取消选中它们,但是我不能再次选中它们。 When unchecked checkboxes, the value is removed from the array peopleChecked
, when them wants to mark the value is added to the array peopleChecked
, but the checkboxes aren't checked 如果未选中复选框,则将值从peopleChecked
数组中删除,当他们想要标记该值时,将其添加到数组peopleChecked
,但未选中复选框
class App extends Component {
constructor() {
super();
this.state = {
people: [
{
firstname: "Paul",
userCompetences: [
{
asset: {
id: "12345"
}
}
]
},
{
firstname: "Victor",
userCompetences: [
{
asset: {
id: "5646535"
}
}
]
},
{
firstname: "Martin",
userCompetences: [
{
asset: {
id: "097867575675"
}
}
]
},
{
firstname: "Gregor",
userCompetences: [
{
asset: {
id: "67890"
}
}
]
}
],
peopleChecked: [
{
amount: 0,
asset: {
id: "fgfgfgfg",
name: 'Gregor'
},
asset_id: '67890'
},
{
amount: 0,
asset: {
id: "dsdsdsd"
},
asset_id: '12345'
},
],
selectPeopleId: []
}
}
handleSelect = (person) => {
//Check if clicked checkbox is already selected
var found = this.state.peopleChecked.find((element) => {
return element.asset_id === person.userCompetences[0]['asset']['id'];
});
console.log(found);
if(found){
//If clicked checkbox already selected then remove that from peopleChecked array
this.setState({
peopleChecked: this.state.peopleChecked.filter(element => element.asset_id !== person.userCompetences[0]['asset']['id']),
selectPeopleId: this.state.selectPeopleId.filter(element => element !== person.userCompetences[0]['asset']['id'])
}, () => console.log(this.state.peopleChecked))
}else{
//If clicked checkbox is not already selected then add that in peopleChecked array
this.setState({
selectPeopleId: [...this.state.selectPeopleId, person.userCompetences[0]['asset']['id']],
peopleChecked: [...this.state.peopleChecked, person]
}, () => {console.log(this.state.selectPeopleId)})
}
}
render() {
return (
<div>
{this.state.people.map(person => (
<div key={person.firstname} className="mb-1">
<input
type={'checkbox'}
id={person.id}
label={person.firstname}
checked={
this.state.peopleChecked.some(
({ asset_id }) => asset_id === person.userCompetences[0]['asset']['id']
)}
onChange={() => this.handleSelect(person)}
/> {person.firstname}
</div>
))}
</div>
);
}
}
You can probably simplify your handleSelect
logic a bit. 您可能可以简化您的handleSelect
逻辑。 Try breaking it down so you have an array of strings to work with. 尝试将其分解,以便使用一系列字符串。 This is all you need just to toggle the checkboxes: 这就是您仅需切换复选框的全部:
See sandbox with working code: https://stackblitz.com/edit/react-xsqhwt?file=index.js 请参阅具有工作代码的沙箱: https : //stackblitz.com/edit/react-xsqhwt?file=index.js
handleSelect = person => {
const { peopleChecked } = this.state;
let peopleCheckedClone = JSON.parse(JSON.stringify(peopleChecked));
const personId = person.userCompetences[0].asset.id;
const removeIndex = peopleChecked.findIndex(
person => person.asset_id === personId
);
if (removeIndex >= 0) {
peopleCheckedClone.splice(removeIndex, 1);
} else {
peopleCheckedClone = [...peopleCheckedClone, { asset_id: personId }];
}
this.setState({
peopleChecked: peopleCheckedClone
});
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.