我想要一个在 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;

每当用户选择属性类型让我们说 home 时，所有具有属性类型 home 的结果都应该在下面列出。为此，我是否需要每个输入按钮和选择按钮上的 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 } />
        ...
    );
}

我希望它对你有用；）