reactjs - 使用 ant design react 在扩展行中搜索

Question

我在表头中有一个搜索字段，需要在我的扩展行中进行搜索。今天只能找到属于表头的元素。

我今天的代码示例：

getColumnSearchProps = dataIndex => ({
filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) => (
  <div style={{ padding: 8 }}>
    <Input
      ref={node => {
        this.searchInput = node;
      }}
      placeholder={`Search ${dataIndex}`}
      value={selectedKeys[0]}
      onChange={e => setSelectedKeys(e.target.value ? [e.target.value] : [])}
      onPressEnter={() => this.handleSearch(selectedKeys, confirm)}
      style={{ width: 188, marginBottom: 8, display: 'block' }}
    />
    <Button
      type="primary"
      onClick={() => this.handleSearch(selectedKeys, confirm)}
      icon="search"
      size="small"
      style={{ width: 90, marginRight: 8 }}
    >
      Search
    </Button>
    <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
      Limpar
    </Button>
  </div>
),
filterIcon: filtered => (
  <Icon type="search" style={{ color: filtered ? '#1890ff' : undefined }} />
),
onFilter: (value, record) =>
  record[dataIndex]
    .toString()
    .toLowerCase()
    .includes(value.toLowerCase()),
onFilterDropdownVisibleChange: visible => {
  if (visible) {
    setTimeout(() => this.searchInput.select());
  }
},
render: text => (
  <Highlighter
    highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
    searchWords={[this.state.searchText]}
    autoEscape
    textToHighlight={text.toString()}
  />
)});

我需要它像这样的图像：

搜索示例