Question

当我点击特定div时，我想显示已选中，未选中和所有项目。在第一次单击时，这可以工作，但在每次其他单击时，其他项目都会消失。此外，我正在寻找select-all处理程序，并且将事件作为选择标记中的下拉存储列表将非常有用。即使使用单选按钮，每个帮助也应该有用。

 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;

Answer 1

我在代码中做了一些更改。您必须始终保持原始people状态。此外，您必须维护一个单独的键以显示所有选定和未选中的键。 PFB工作代码片段。

const Person = ({person, setToSelect}) => (
 <div>
   <input type="checkbox" name="person" checked={person.checked} onChange= 
         {setToSelect.bind(this, person)} />
 {person.name}
 </div>
 );
 
 class PeopleList extends React.Component {
   render() {
    const { people, showAllItems, selectedItems, selectedItemsUnchecked } = this.props;
   
     return(
         <div>
           {people.map((person, i) => {
             return <Person key={i} person={person} 
                      setToSelect={this.props.setToSelect} />;
           })}
         <div onClick={showAllItems}> All </div>
         <div onClick={selectedItems}> Selected </div>
         <div onClick={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}],
       key: "all",
       peopleShouldBeDisplayed: []
     };
   }
   
   componentDidMount() {
    this.setState({
      peopleShouldBeDisplayed: this.state.people
    });
   }

   selectedItems() {
     const people = this.state.people.filter(p => p.checked);
     this.setState({peopleShouldBeDisplayed: people, key: "selected"});
   }

  selectedItemsUnchecked() {
   const people = this.state.people.filter(p => !p.checked);
   this.setState({peopleShouldBeDisplayed: people, key: "unselected"});
  }
  
  showAllItems() {
   this.setState({peopleShouldBeDisplayed: this.state.people});
  }

  setToSelect(person) {
    const { people, key } = this.state;
  
    const checked = !person.checked;
    const cPeople = JSON.parse(JSON.stringify(people)); //cloning people for immutability
    cPeople.forEach(p => {
       if(p.id === person.id) p.checked = checked;
  });

   this.setState({
    people: cPeople
   }, () => {
     if(key === "all") {
      this.showAllItems();
     } else if(key === "selected") {
      this.selectedItems();
     } else if(key === "unselected") {
      this.selectedItemsUnchecked();
     }
   });
 }

  render () {

    return <PeopleList 
        people={this.state.peopleShouldBeDisplayed}
        selectedItems={this.selectedItems.bind(this)} 
        selectedItemsUnchecked={this.selectedItemsUnchecked.bind(this)} 
        showAllItems={this.showAllItems.bind(this)}
        setToSelect={this.setToSelect.bind(this)}
      />;
   }
}

ReactDOM.render(<App />, document.getElementById("root"));

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

ReactJS复选框显示onClick上已选中/未选中的项目

1 个答案: