reactjs 在react中实现全局搜索以搜索整个数据库记录

3lxsmp7m  于 2023-11-18  发布在  React
关注(0)|答案(2)|浏览(131)

我有一个使用primeReact的自定义数据表。我有一个全局搜索。

handleGlobalSearch = () => {
const { globalSearch } = this.state;
const { data } = this.props;

if (globalSearch) {
  const filteredData = data.filter((row) =>
    Object.values(row).some((value) =>
      (value as any).toString().toLowerCase().includes(globalSearch.toLowerCase())
    )
  );

  this.setState({
    dataToDisplay: filteredData,
    currentPage: 1,
  });
} else {
  this.setState({
    dataToDisplay: data,
    currentPage: 1,
  });
}};

字符串
它只会搜索数据表记录。但我希望它是一个回调函数,这样它就可以搜索整个数据库记录的API,我调用获取表中的数据。该API的将不同的表,因为这个自定义数据表将与不同的API的和不同的数据使用。我如何才能实现这一点。有人可以帮助我与此!提前感谢!

bqujaahr

bqujaahr1#

@January要在回调模式下使用PrimeReact,它正在查看您的数据库,您需要使用“lazy”模式,如以下示例:https://primereact.org/datatable/#lazy_load
我有一个完整的工作演示,它在后端使用PostGresDB,并向您展示如何将其连接到REST服务,以使您的PrimeReact Datatable完全懒惰:https://github.com/melloware/quarkus-primereact

py49o6xq

py49o6xq2#

要实现可以根据特定表从不同API检索数据的全局搜索,您可以创建一个回调函数,该函数将搜索查询作为参数并从相应的API获取数据。您可以将此回调函数作为prop传递给自定义数据表组件,并在全局搜索启动时使用它。
这里有一个实现这一目标的基本结构:
创建一个回调函数,用于根据搜索查询获取数据。此函数将根据每个表的API而有所不同。
将回调函数作为prop传递给自定义数据表组件。
在自定义数据表组件中,在启动全局搜索时调用回调函数,并将搜索查询作为参数传递。
使用从API获得的新数据更新表格。
下面是一个如何构造代码的示例:

// Parent component that defines the callback function
class DataTableContainer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      globalSearch: '',
      dataToDisplay: [],
      currentPage: 1,
    };
  }

  // Define the callback function for fetching data from the API
  fetchDataFromAPI = async (searchQuery) => {
    try {
      // Fetch data from the appropriate API using searchQuery
      // Example: const response = await fetch(`API_ENDPOINT?search=${searchQuery}`);
      // const data = await response.json();
      // Update this.state.dataToDisplay with the fetched data

      this.setState({
        dataToDisplay: data, // Replace 'data' with fetched data
        currentPage: 1,
      });
    } catch (error) {
      console.error('Error fetching data: ', error);
    }
  };

  handleGlobalSearch = () => {
    const { globalSearch } = this.state;

    if (globalSearch) {
      // Call the callback function with the search query
      this.fetchDataFromAPI(globalSearch);
    } else {
      // Handle the case when no search query is provided
      this.setState({
        dataToDisplay: [], // Reset data or load the default data
        currentPage: 1,
      });
    }
  };

  render() {
    return (
      <div>
        {/* Your search input and other components */}
        <CustomDataTable
          data={this.state.dataToDisplay}
          onGlobalSearch={this.handleGlobalSearch}
        />
      </div>
    );
  }
}

// Custom data table component
class CustomDataTable extends React.Component {
  // Your custom data table component code
}

export default DataTableContainer;

字符串
在此示例中,DataTableContainer是定义回调函数fetchDataFromAPI的父组件,该函数基于搜索查询从API获取数据。然后将此函数作为prop传递给CustomDataTable组件。当启动全局搜索时,将调用回调函数,并使用新数据更新表。API调用的具体细节应根据您的用例进行调整。

相关问题