如何在React中为material-React上每一列实现自定义搜索远程数据

import React, { Component } from 'react';
import { Table, TableHead, TableBody, TableRow, TableCell, TextField } from '@material-ui/core';
import axios from 'axios';

class CustomTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [], // 所有数据
      searchResults: [], // 搜索结果
      keyword: '', // 搜索关键字
    };
  }

  componentDidMount() {
    // 发送远程请求获取所有数据
    axios.get('https://api.example.com/data')
      .then(response => {
        this.setState({ data: response.data });
      })
      .catch(error => {
        console.error(error);
      });
  }

  handleSearch = (event) => {
    const keyword = event.target.value;
    this.setState({ keyword });

    // 发送远程请求进行搜索
    axios.get(`https://api.example.com/search?keyword=${keyword}`)
      .then(response => {
        this.setState({ searchResults: response.data });
      })
      .catch(error => {
        console.error(error);
      });
  }

  render() {
    const { data, searchResults, keyword } = this.state;

    return (
      <div>
        <TextField
          label="Search"
          value={keyword}
          onChange={this.handleSearch}
        />
        <Table>
          <TableHead>
            <TableRow>
              <TableCell>Column 1</TableCell>
              <TableCell>Column 2</TableCell>
              <TableCell>Column 3</TableCell>
              {/* 其他列 */}
            </TableRow>
          </TableHead>
          <TableBody>
            {searchResults.length > 0 ? (
              searchResults.map(item => (
                <TableRow key={item.id}>
                  <TableCell>{item.column1}</TableCell>
                  <TableCell>{item.column2}</TableCell>
                  <TableCell>{item.column3}</TableCell>
                  {/* 其他列 */}
                </TableRow>
              ))
            ) : (
              data.map(item => (
                <TableRow key={item.id}>
                  <TableCell>{item.column1}</TableCell>
                  <TableCell>{item.column2}</TableCell>
                  <TableCell>{item.column3}</TableCell>
                  {/* 其他列 */}
                </TableRow>
              ))
            )}
          </TableBody>
        </Table>
      </div>
    );
  }
}

export default CustomTable;