如何使用Reactjs在Datatables中应用单个列搜索栏

import React, { Component } from 'react';
import $ from 'jquery';
import 'datatables.net';

class DataTable extends Component {
  constructor(props) {
    super(props);
    this.state = {
      searchKeyword: '',
    };
  }

  componentDidMount() {
    // 初始化Datatables表格
    this.$el = $(this.el);
    this.$el.DataTable({
      data: this.props.data,
      columns: this.props.columns,
    });
  }

  componentDidUpdate() {
    // 更新Datatables表格数据
    this.$el.DataTable().clear();
    this.$el.DataTable().rows.add(this.props.data);
    this.$el.DataTable().draw();
  }

  handleSearchChange = (event) => {
    // 更新搜索关键字
    this.setState({ searchKeyword: event.target.value });
  }

  handleSearch = () => {
    // 根据搜索关键字过滤表格数据
    this.$el.DataTable().search(this.state.searchKeyword).draw();
  }

  render() {
    return (
      <div>
        <input type="text" value={this.state.searchKeyword} onChange={this.handleSearchChange} />
        <button onClick={this.handleSearch}>搜索</button>
        <table ref={(el) => (this.el = el)}></table>
      </div>
    );
  }
}

export default DataTable;