Ich möchte eine Idee für die Filteroption in reactjs

Question

Ich möchte Filtersystem erstellen. Es wird 3 Filteroptionen geben. Eine Art von Eigentum (beinhaltet Haus, Wohnung, Herberge, Laden), Anzahl der Zimmer und Preisklasse. Meine Filterseite sieht so aus.

Der Code für Filteroption Komponente ist

class FilterSpace extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = { city: '' } 
    } 
    render(){ 

     return(
      <div className='container'> 
       <div className="row"> 
        <div className="col-md-3"> 
         <p>Property Type</p> 
        </div> 
        <div className="col-md-9"> 
         <label className = "checkbox-inline"> 
          <input type="checkbox" id="appartment" value="option1" /> Appartment 
         </label> 
         <label className = "checkbox-inline"> 
          <input type="checkbox" id="house" value="option2" /> House 
         </label><label className = "checkbox-inline"> 
          <input type="checkbox" id="shop" value="option1" /> Shop 
         </label> 
        </div> 
       </div> 

       <div className="row"> 
        <div className="col-md-3"> 
         <p>Number of Rooms</p> 
        </div> 
        <div className="col-md-9"> 
         <select className = "form-control" defaultValue="Rooms"> 
          <option>1 room</option> 
          <option>2 rooms</option> 
          <option>3 rooms</option> 
          <option>4 rooms</option> 
          <option>5+ rooms</option> 
        </select> 
        </div> 
       </div> 

       <div className="row"> 
        <div className="col-md-3"> 
         <p>Price Range</p> 
        </div> 
        <div className="col-md-9"> 
         <input type="range" min="1000" max="30000" /> 
        </div> 
       </div> 
      </div> 
      ) 
    } 
} 
export default FilterSpace; 

Jedes Mal, wenn Benutzer für Objekttyp wählt lässt nach Hause sagen, dann sind alle das Ergebnis, das Objekttyp zu Hause hat, sollte unten aufgeführt werden. Dazu brauche ich onChange Event auf jeder Eingabeschaltfläche und wähle die Schaltfläche? Was sollte ich noch tun müssen? Ich brauche nur eine Idee.

Meine API sieht wie folgt aus

"objects": [ 
    { 
     "amenities": "Kitchen, Cable, Attached Bathroom, Internet", 
     "city": "Biratnagar", 
     "created_on": "2016-04-25T05:54:48.542759", 
     "email": "example@gmail.com", 
     "gallery": [ 
     { 
      "id": 10, 
      "image": "/media/upload/hostel2.jpg", 
      "rental": "/api/v1/rental/32/", 
      "resource_uri": "/api/v1/gallery/10/" 
     }, 
     { 
      "id": 11, 
      "image": "/media/upload/hostel1.jpg", 
      "rental": "/api/v1/rental/32/", 
      "resource_uri": "/api/v1/gallery/11/" 
     } 
     ], 
     "id": 32, 
     "is_published": true, 
     "listingName": "ganesh chowk hostel", 
     "modified_on": "2016-04-25T05:54:48.542816", 
     "ownerName": "name of rent owner", 
     "phoneNumber": 9842333833, 
     "place": "Ganesh Chowk", 
     "price": 6000, 
     "property": "hostel", 
     "resource_uri": "/api/v1/rental/32/", 
     "room": 3, 
     "slug": "ganesh-chowk-hostel", 
     "summary": "We offer you comfortable room with educational environment to you. Inverter is provided for one bulb on each room. The price is reasonable with charge of 2000 per room. For more detail contact us on our phone number provided.", 
     "water": "yes" 
    } 
    ] 

Answer 1

An jedem Eingang, sollten Sie das Ereignis verknüpfen onChange mit einer Funktion der Komponente (handleInputOnChange(event) {}) und dort, um einen Anruf zu Ihrem API machen.

Denken Sie daran, die Funktion mit dem Komponentenkontext zu verbinden.

constructor(props) { 
    super(props) 
    this.state = { city: '' } 

    this.handleInputOnChange = this.handleInputOnChange.bind(this); 
} 

handleInputOnChange(event) { 
    //Handle event 
} 

render() { 
    return(
     ... 
     <input onChange={ this.handleInputOnChange } /> 
     ... 
    ); 
} 

Ich hoffe, es funktioniert für Sie;)