Question

App正在Node.js和React上运行。在数据库（使用mongodb）中，我具有“房间”集合，其中包含有关特定房间的详细信息。

我试图基于例如客人数来搜索该集合，并且如果搜索输入中的客人数为2，我想显示所有可以容纳两个客人的房间。

我的问题是是否可以对收集室中的每个字段进行搜索输入？例如客人人数，房型，价格等...

使用搜索输入或下拉搜索更好吗？

服务器部件

UserModel.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Define our model
const roomSchema = new Schema({
    title: { type: String },
    description: { type: String },
    price: { type: Number },
    room_type: { type: String },
    nb_guests: { type: Number },
    imageData: {type: String}
});

// Create the model class
const ModelClass = mongoose.model('room', roomSchema);

// Export the model
module.exports = ModelClass;

客户端部件

LandingPage.js

const Room = props => (
    <div className = "col-md-4" >
        <div className="card mb-4 shadow-sm">
            <img src={room9} class="card-img-top" 
             alt="..." width="100%" height="225" />
            <div className="card-body">
                <h5 class="card-title">{props.room.title}</h5>
                <p className="card-text">{props.room.description}</p>
                <div className="d-flex justify-content-between align- 
                       items-center">
                    <div className="btn-group">
                    <Link  className="btn btn-sm 
                    btn-outline-secondary" to={"/view/"+props.room._id}>View</Link>
                    </div>
                </div>
            </div>
        </div>
    </div >
)

function searchingFor(term){
    return function(x){
        return x.props.room.nb_guests.toLowerCase().includes(term.toLowerCase()) || !term;
    }
}
    export default class LandingPage extends React.Component {
        constructor(props) {
            super(props);
            this.state = { 
                rooms: [],
                term:''
            }
            this.onSearchHandler = this.onSearchHandler.bind(this);
        }

        componentDidMount() {
            axios.get('http://localhost:3090/admin/')
                .then(response => {
                    this.setState({
                        rooms: response.data
                    })
                        .catch(function (error) {
                            console.log(error);
                        })
                })
        }

        roomList() {
            return this.state.rooms.filter(searchingFor(this.state.term)).map(function (currentRoom, i) {
                return <Room room={currentRoom} key={i} />
            });
        }

        onSearchHandler(e){
            this.setState({
                term:e.target.value
            })
        }
        render() {
            return (
                <div>
                    <LPheader />
                    <Carousel />
                    <div>
                        <div className="album py-5 bg-light">
                            <div className="container">
                                <div className="row">
                                    <form>
                                        <input 
                                        type="text"
                                        onChange={this.onSearchHandler}
                                        value={term}
                                        />
                                    </form>
                                    {this.roomList()}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            )
        }
    }

这是我开始使用的代码，但出现此错误

Uncaught ReferenceError: term is not defined

说实话，我什至不确定这样做是否正确，任何建议将不胜感激。

更新

roomList = () => {
        const { rooms, term } = this.state;

        if (!term) {
          return rooms.map(function(currentRoom, i) {
            return <Room room={currentRoom} key={i} />;
          });
        } else if {
          return rooms
            .filter(room => {
              return room.nb_guests == term;
            })
            .map(matchingRoom => {
              return <Room room={matchingRoom} />;
            });
            else if{
                .filter(room => {
                    return room.price == term;
                  })
                  .map(matchingRoom => {
                    return <Room room={matchingRoom} />;
                  });
                  else if{
                    .filter(room => {
                        return room.room_type == term;
                      })
                      .map(matchingRoom => {
                        return <Room room={matchingRoom} />;
                      });
            }
        }
      };

      onSearchHandlerPrice = e => {
        this.setState({
          term: (e.target.value)
        });
      };

      onSearchHandlerGuests = e => {
        this.setState({
          term: (e.target.value)
        });
      };


<div className="container">
<div className="row">
  <form>
    <input type="text" onChange={this.onSearchHandlerGuests} value={this.state.term} />
  </form>

  <form>
    <input type="text" onChange={this.onSearchHandlerPrice} value={this.state.term} />
  </form>
  {this.roomList()}
</div>
</div>

Answer 1

您即将完成这项工作。我认为searchingFor()函数使您的逻辑过于复杂。请参见以下沙箱，了解如何根据客人人数过滤房间：https://codesandbox.io/s/thirsty-dan-vjt7o

注释：

我注释了axios请求，并插入了一些示例数据。如果您用自己的代码交换回去，它仍然可以正常工作。

您可以通过在用户输入时更新term状态值来简化代码，从而重新渲染并在新执行的roomList()内过滤并返回与{{ 1}}。

term

使用ReactJs和Node.js构建搜索过滤器

1 个答案: