React hooks + antd foreground は入力検索ボックスを実装してリアルタイムでテーブル フォームを検索します

この記事を読む前提は、react フックでの useState と useEffect の基本的な使い方をマスターすることです!

?.詳細については、「オプションのチェーン」シンタックス シュガーを参照してください。

効果を達成する

実装手順

1.紹介する

SearchOutlined アイコンfilterparamList:
元のテーブル データでフィルタリングされた結果リスト
associatedvalue: 入力ボックスの値 ( search value )

import {
    
     SearchOutlined } from '@ant-design/icons'	
const [associatedvalue, setAssociatedValue] = useState()
const [filterparamList, setFilterParamList] = useState([])	

2. 初期化

現在のコンポーネントがテーブル値を取得する方法に応じて、さまざまなインポートの初期化が実行されます。

重要: 生のフォーム データを初期化する

In the following steps, the trigger condition used by useEffect is associatedvaluea change, and the filtering list filterparamListwill get the associated data.
つまり、入力したばかりの入力が値のない場合はfilterparamList空白になり、レンダリングされると空白になります。そのfilterparamListため、テーブルの初期データ (合計データ) である初期値を割り当てる必要があります。

方法 1: コンポーネント内のインターフェースにデータ取得を要求する.インターフェースの
戻り値はres.result

getAllPublicParam(xxxxx).then(res => {
    
    
    if (res?.success) {
    
    
      setFilterParamList(res.result)     //初始化设置，防止开始空白情况，接收筛选后的列表
    } else {
    
    
      message.error(res?.message || '接口异常')
    }
}

方法 2: コンポーネント内の親コンポーネントからテーブル データ props データを取得する props
データはテーブルの初期データであり、 useEffect でfilterparamList初期値を設定します。

const {
    
    data} = props

useEffect(() => {
    
    
  setFilterParamList(data.list || [])
}, [data])	  

3. データのフィルタリング

associatedvalue変更をリッスンして更新を関連付け、filterparamListフィルターを使用して検索条件をフィルタリングする

useEffect(() => {
    
    
  if (associatedvalue !== '') {
    
    		//当value不为空时
    setFilterParamList([])
    setFilterParamList(
      data?.list?.filter(item => {
    
    	
      //  name,displayName,paramValue为接口数据中属性（根据需求灵活变更）
      //  其中任一含有associatedvalue则通过筛选
        if (
          item?.name?.indexOf(associatedvalue) !== -1 ||
          item?.displayName?.indexOf(associatedvalue) !== -1 ||
          item?.paramValue?.indexOf(associatedvalue) !== -1
        ) {
    
    
          return true
        }
        return false
      }),
    )
  } else {
    
    	//为空时将渲染原始表格数据
    setFilterParamList(data?.list)
  }
}, [associatedvalue]) 

4. データの入力と表示

入力の連携onchangeによりvalue、リアルタイムで変更しassociatedvalue、フィルタリングをトリガーすることができます.
useEffect テーブルに割り当てられたデータがdataSourceテーブルに表示されます, ここにフィルタリング結果のリストがあるはずです.filterparamList

ヒント:paramsColsここでは展開されていないのはテーブルのヘッダー データであり (検索機能とは関係ありません)、具体的な使用方法は antd ドキュメントで確認できます。

return (
<Input
  value={
    
    associatedvalue}
  onChange={
    
    e => {
    
    
    setAssociatedValue(e.target.value?.trim())
  }}
  placeholder="请输入参数名称、参数显示名、参数说明搜索"
  allowClear
  style={
    
    {
    
     marginLeft: '20px', marginBottom: '6px', width: 350 }}
  prefix={
    
    <SearchOutlined style={
    
    {
    
     color: '#DEE0E8' }} />}
/>
<Table
  rowKey="id"
  columns={
    
    _.filter(paramsCols, item => item.show !== false)}
  dataSource={
    
    _.uniqBy(filterparamList, 'id')}
  pagination={
    
    false}
  size="middle"
  scroll={
    
    {
    
     y: 350 }}
/>
)