javascript - 复选框的值已添加到数组中,但未选中复选框
问题描述
我检查了两个复选框。我可以取消选中它们,但我不能再次选中它们。当未选中复选框时,该值从数组中移除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>
);
}
}
解决方案
您可能可以稍微简化您的handleSelect
逻辑。尝试将其分解,以便您可以使用一系列字符串。这就是您切换复选框所需的全部内容:
使用工作代码查看沙箱: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
});
};
推荐阅读
- java - 带有 Java 错误的 Apache Spark 安装
- java - On screen rotation , canvas drawing is going behind image in Android?
- python - Rearranging letters but keep the first and last the same
- javascript - console log chrome can not display any results (even simple program javascript program)?
- python-3.x - Python (ast module): id field of func: expr unknown
- c++ - comparing objects of class in a vector using operator overloading
- apache-spark - Why argo doesn't finish, when the spark submit of an apache spark app on k8s ends?
- windows - Unable to open the config file and Failed to generate orderer genesis block
- android - unable to get 11 character long hash string for my android app
- arangodb - ArangoDB: Unable to initialize RocksDB engine: IO error