请帮我生成一个React类组件的搜索帮助 带弹出框的 弹出框里有表格和搜索功能 可关闭弹出框

好的，下面是一个简单的React类组件的搜索帮助，带有弹出框和搜索功能，并且可以关闭弹出框。弹出框内包含一个表格，可以根据搜索关键字进行筛选。

import React, { Component } from 'react';

class SearchHelp extends Component {
  constructor(props) {
    super(props);

    this.state = {
      searchStr: '',
      showPopup: false,
      data: [
        { id: 1, name: 'Apple', quantity: 10 },
        { id: 2, name: 'Banana', quantity: 20 },
        { id: 3, name: 'Orange', quantity: 30 },
        { id: 4, name: 'Grape', quantity: 40 }
      ]
    };
  }

  handleSearchChange = e => {
    this.setState({ searchStr: e.target.value });
  };

  handleOpenPopup = () => {
    this.setState({ showPopup: true });
  };

  handleClosePopup = () => {
    this.setState({ showPopup: false });
  };

  render() {
    const { searchStr, showPopup, data } = this.state;

    const filteredData = data.filter(
      item =>
        item.name.toLowerCase().includes(searchStr.toLowerCase()) ||
        item.quantity.toString().includes(searchStr)
    );

    return (
      <div>
        <input
          type="text"
          placeholder="Search"
          value={searchStr}
          onChange={this.handleSearchChange}
        />
        <button onClick={this.handleOpenPopup}>Help</button>

        {showPopup && (
          <div>
            <div>
              <input
                type="text"
                placeholder="Search"
                value={searchStr}
                onChange={this.handleSearchChange}
              />
              <button onClick={this.handleClosePopup}>Close</button>
            </div>
            <table>
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Quantity</th>
                </tr>
              </thead>
              <tbody>
                {filteredData.map(item => (
                  <tr key={item.id}>
                    <td>{item.id}</td>
                    <td>{item.name}</td>
                    <td>{item.quantity}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>
    );
  }
}

export default SearchHelp;

这个组件包含一个`<input>`元素用于输入搜索关键字，一个“Help”按钮用于打开弹出框。弹出框中包含一个`<input>`元素和一个“Close”按钮，用于关闭弹出框。弹出框内部还包含一个表格，其中的数据根据搜索关键字进行筛选。