mercredi 13 juin 2018

ReactJS checkbox display checked/unchecked items onClick

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