When I click on the specific div, I want to display checked, unchecked and all the items. On first click this works, but on every other click, others items disappear..Also I am looking for select-all handler, and it will be useful that event are drop-down stored list in select tag. Every help should be useful even if is with radio buttons.
import React, { Component } from "react";
import "./App.css";
const Person = ({person, setToSelect}) => (
<div>
<input type="checkbox" name="person" checked={person.checked} onChange=
{setToSelect.bind(this, person)} />
{person.name}
</div>
);
class PeopleList extends Component {
render() {
return(
<div>
{this.props.people.map((person, i) => {
return <Person key={i} person={person}
setToSelect={this.props.setToSelect} />;
})}
<div> All </div>
<div onClick={this.props.selectedItems}> Selected </div>
<div onClick={this.props.selectedItemsUnchecked}> Unselected </div>
</div>
);
}
}
class App extends React.Component {
constructor(props) {
super(props)
this.state = {
people:[
{id:1, name:'Admin', checked:true},
{id:2, name:'User1', checked:false},
{id:3, name:'User2', checked:false}]
}
}
selectedItems()
{
const people = this.state.people.filter(p => p.checked);
this.setState({people});
}
selectedItemsUnchecked()
{
const people = this.state.people.filter(p => !p.checked);
this.setState({people});
}
setToSelect(person)
{
const checked = !person.checked;
const people = this.state.people.map((p)=>{
if(p.id === person.id)
return {name:person.name, checked};
return p;
});
this.setState({people});
}
render () {
return <PeopleList
people={this.state.people}
selectedItems={this.selectedItems.bind(this)}
selectedItemsUnchecked={this.selectedItemsUnchecked.bind(this)}
setToSelect={this.setToSelect.bind(this)}
/>;
}
}
export default App;
Aucun commentaire:
Enregistrer un commentaire