1. 程式人生 > 實用技巧 >antd table表單再次進入清空搜尋框的內容

antd table表單再次進入清空搜尋框的內容

問題描述:table內增加了搜尋框第一次輸入內容,等下次開啟的時候搜尋框內內容未清空,仍然存在,

原因:未重現載入table 即selectkeys未清空

解決:

clearFilters引數antd自帶的清空輸入框內容的方法,定義一個全域性的方法把clearFilters賦值給這個方法clearTabSearch,再彈窗取消和確定按鈕點選的時候呼叫

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, dataIndex)}
          style={{ width: 188, marginBottom: 8, display: 'block' }}
        />
        <Button
          type="primary"
          onClick={() => this.handleSearch(selectedKeys, confirm, dataIndex)}
          icon="search"
          size="small"
          style={{ width: 90, marginRight: 8 }}
        >
          Search
        </Button>
        <Button onClick={() => this.handleReset(clearFilters)} size="small" style={{ width: 90 }}>
          Reset
        </Button>
      </div>
    ),