如何使用React JS firestore创建搜索框

import firebase from 'firebase/app';
import 'firebase/firestore';

firebase.initializeApp({
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  projectId: 'YOUR_PROJECT_ID',
});

const db = firebase.firestore();

class SearchBox extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchQuery: '',
      searchResults: [],
    };
  }

  handleSearchInputChange = (event) => {
    const searchQuery = event.target.value;
    this.setState({ searchQuery });

    // 在这里执行搜索逻辑
    this.searchFirestore(searchQuery);
  }

  searchFirestore = (searchQuery) => {
    // 执行Firestore查询
    db.collection('your_collection')
      .where('your_field', '==', searchQuery)
      .get()
      .then((querySnapshot) => {
        const searchResults = [];
        querySnapshot.forEach((doc) => {
          searchResults.push(doc.data());
        });
        this.setState({ searchResults });
      })
      .catch((error) => {
        console.error('Error searching Firestore:', error);
      });
  }

  render() {
    return (
      <div>
        <input
          type="text"
          value={this.state.searchQuery}
          onChange={this.handleSearchInputChange}
        />
        <ul>
          {this.state.searchResults.map((result) => (
            <li key={result.id}>{result.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}