title: Using ref with React Hooks in Ant design (antd) Table component with customized filters
body: <p>I'm trying to use Antd Table <a href="https://ant.design/components/table/" rel="noreferrer">https://ant.design/components/table/</a> with customized filters and React Hooks.
  Most of all code from provided example were converted to hooks' logic successfully 
  but I have no idea how to convert <strong>"this.searchInput"</strong> (which are commented below) from the code.</p>
  
  <p>Example from the Antd site which was converted by me to React Hooks:</p>
  
  <pre><code>import { Table, Input, Button, Space } from 'antd';
  import Highlighter from 'react-highlight-words';
  import { SearchOutlined } from '@ant-design/icons';
  
  
  
  function App() {
    const [searchText, setSearchText] = useState('');
    const [searchedColumn, setSearchedColumn] = useState('');
  
    const data = [
      {
        key: '1',
        name: 'John Brown',
        age: 32,
        address: 'New York No. 1 Lake Park',
      },
      {
        key: '2',
        name: 'Joe Black',
        age: 42,
        address: 'London No. 1 Lake Park',
      },
      {
        key: '3',
        name: 'Jim Green',
        age: 32,
        address: 'Sidney No. 1 Lake Park',
      },
      {
        key: '4',
        name: 'Jim Red',
        age: 32,
        address: 'London No. 2 Lake Park',
      },
    ];
  
    function getColumnSearchProps(dataIndex) {
      return {
        filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters }) =&gt; (
          &lt;div style={{ padding: 8 }}&gt;
            &lt;Input
              // ref={node =&gt; {
              //   this.searchInput = node;
              // }}
              placeholder={`Search ${dataIndex}`}
              value={selectedKeys[0]}
              onChange={e =&gt; setSelectedKeys(e.target.value ? [e.target.value] : [])}
              onPressEnter={() =&gt; handleSearch(selectedKeys, confirm, dataIndex)}
              style={{ width: 188, marginBottom: 8, display: 'block' }}
            /&gt;
            &lt;Space&gt;
              &lt;Button
                type="primary"
                onClick={() =&gt; handleSearch(selectedKeys, confirm, dataIndex)}
                icon={&lt;SearchOutlined /&gt;}
                size="small"
                style={{ width: 90 }}
              &gt;
                Search
              &lt;/Button&gt;
              &lt;Button onClick={() =&gt; handleReset(clearFilters)} size="small" style={{ width: 90 }}&gt;
                Reset
              &lt;/Button&gt;
            &lt;/Space&gt;
          &lt;/div&gt;
        ),
        filterIcon: filtered =&gt; &lt;SearchOutlined style={{ color: filtered ? '#1890ff' : undefined }} /&gt;,
        onFilter: (value, record) =&gt;
          record[dataIndex].toString().toLowerCase().includes(value.toLowerCase()),
        onFilterDropdownVisibleChange: visible =&gt; {
          if (visible) {
            // setTimeout(() =&gt; this.searchInput.select());
          }
        },
        render: text =&gt;
          searchedColumn === dataIndex ? (
            &lt;Highlighter
              highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}
              searchWords={[searchText]}
              autoEscape
              textToHighlight={text.toString()}
            /&gt;
          ) : (
            text
          ),
      }
    };
  
    function handleSearch(selectedKeys, confirm, dataIndex) {
      confirm();
      setSearchText(selectedKeys[0]);
      setSearchedColumn(dataIndex);
    };
  
    function handleReset(clearFilters) {
      clearFilters();
      setSearchText('');
    };
  
    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        key: 'name',
        width: '30%',
        ...getColumnSearchProps('name'),
      },
      {
        title: 'Age',
        dataIndex: 'age',
        key: 'age',
        width: '20%',
        ...getColumnSearchProps('age'),
      },
      {
        title: 'Address',
        dataIndex: 'address',
        key: 'address',
        ...getColumnSearchProps('address'),
      },
    ];
  
    return &lt;Table columns={columns} dataSource={data} /&gt;;
  
  }
  
  export default App;
  </code></pre>
  
  <p>Thank you.</p>