我想要一个想法，在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 } /> 
     ... 
    ); 
} 

我希望它为你工作;）