我想要一個想法，在reactjs中篩選選項

Question

我想創建過濾系統。將有3個過濾選項。一種是屬性類型（包括家庭，公寓，旅館，商店），房間數量和價格範圍。我的過濾頁面看起來像這樣。

過濾選項組件的代碼是

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; 

每當用戶選擇屬性類型，以讓說，家裏那麼所有有物業類型的家庭應下面列出的結果。爲此，我需要每個輸入按鈕上的onChange事件並選擇按鈕？還有什麼我該做的？我只是需要一個想法。

我的API看起來像這樣

"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

在每個輸入，您應該鏈接該事件的onChange與組分（handleInputOnChange(event) {}），並有一個功能，讓你的API的調用。

請記住，將函數與組件上下文綁定。

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

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

handleInputOnChange(event) { 
    //Handle event 
} 

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

我希望它爲你工作;）