Javascript 如何在React表中实现过滤逻辑？

Im使用React表显示从API调用接收的数据。目前，我将状态保存在本地，表格显示数据。我为两列添加了列值过滤。我的过滤逻辑如下：

    <ReactTable
  data={tableData}
  noDataText="Loading.."
  filterable
  defaultFilterMethod={(filter, row) =>
    String(row[filter.id]) === filter.value}
    };
  }}
  columns={[
    {
      columns: [
        {
          Header: 'Name',
          accessor: 'Name',
          id: 'Name',
          Cell: ({ value }) => (value === 'group1' ? 
          'group1' : 'group2'),
          filterMethod: (filter, row) => {
            if (filter.value === 'all') {
              return true;
            }
            if (filter.value === 'group1') {
              return row[filter.id] === 'group1';
            }
            if (filter.value === 'group2') {
              return row[filter.id] === 'group2';
            }
          },
          Filter: ({ filter, onChange }) =>
            <select
              onChange={event => onChange(event.target.value)}
              style={{ width: '100%' }}
              value={filter ? filter.value : 'all'}
            >
              <option value="all">All</option>
              <option value="group1">Group1</option>
              <option value="group2">Group2</option>
            </select>,
        },
   }

字符串（行[filter.id]）==filter.value}
};
}}
纵队={[
{
栏目：[
{
标题：“名称”，
访问者：“名称”，
id:'名称'，
单元格：（{value}）=>（value=='group1'？
“group1”：“group2”），
过滤器方法：（过滤器，行）=>{
如果（filter.value==='all'）{
返回true；
}
如果（filter.value=='group1'）{
返回行[filter.id]=“group1”；
}
如果（filter.value=='group2'）{
返回行[filter.id]=“group2”；
}
},
筛选器：（{Filter，onChange}）=>
onChange（event.target.value）}
样式={{width:'100%}
value={filter？filter.value:'all'}
>
全部的
第一组
第2组
,
},
}

---

到目前为止，过滤规则是在两个值之间硬编码的。如何实现过滤逻辑以使过滤是动态的？（如果特定列中有3个或7个不同的值，下拉列表应显示所有7个值，并且过滤器应基于所选的任何值工作）。因为Im使用React Table（）.

没有使用过这个库，但听起来像这样的东西会有用

if (filter.value === 'all') {
  return true;
} else {
  // what ever the value is, we will only
  // show rows that have a column value
  // that matches it
  // If value is 'group1' just show the ones where the column
  // value is 'group1', etc etc.
  return row[filter.id] == filter.value;
}

请注意，在获得精确匹配之前，这不会显示任何内容。因此，即使您有“group1”之类的列值，搜索词“grou”也不会匹配它。如果这不是您想要的行为，那么您也会希望将其切换出去

return row[filter.id] == filter.value;

差不多

return row[filter.id].indexOf(filter.value) >= 0;

作为一个备选方案，如果需要更严格的限制，可以从阵列构建选项

const options = [ { value: "all" , label: "All" }, { value: "group1" , label: "Group1" }];

像这样使用它

       <select
          onChange={event => onChange(event.target.value)}
          style={{ width: '100%' }}
          value={filter ? filter.value : 'all'}
        >
          { options.map(({value,label}) => <option value={value}>{label}</option>)}
        </select>,

---

我猜你想从选项列表中选择选项。 如果是这样，以下是一种方法：

const exampleList = ['option1','option2','option3','option4',...,'option n']

在您的专栏中：

filterMethod:  (filter, row) => customOptionsFilterMethod(filter, row),
Filter: () => ({filter, onChange}) => customOptionsFilter({filter, onChange})

Inside render（）实现CustomOptionFilter和CustomOptionFilter方法如下：

const customOptionsFilter = ({filter, onChange}) => {
      return(
        <select
          onChange={e => onChange(e.target.value)}
          style={{  width: '100%'  }}
          value={filter ? filter.value : 'all'}
          >
          <option value='all'>Show All</option>
          {
            exampleList.map( k => {
              return <option key={k.toString()} value={k}>{k}</option>
            })
          }
        </select>
      )
    }



const customOptionsFilterMethod = (filter, row) => {

      if(filter.value === '') { return true }

      if(exampleList.includes(filter.value)){
        return row[filter.id] === filter.value
      } else { return true }

    }

const customOptionsFilter=（{filter，onChange}）=>{
返回(
onChange（e.target.value）}
样式={{width:'100%}
value={filter？filter.value:'all'}
>
全部展示
{
exampleList.map（k=>{
返回{k}
})
}
)
}
常量自定义选项筛选器方法=（筛选器，行）=>{
如果（filter.value==''{return true}
if（示例列表包括（过滤器值））{
返回行[filter.id]==filter.value
}else{return true}
}

@seavarrior404..这个“返回行[filter.id]='group2'”是什么意思返回，理想情况下，它应该返回true或false。我怀疑它是否返回布尔值或任何值。请澄清这个问题是否仍然悬而未决？未解决？您似乎已经转移到其他问题，但这里没有回答。为什么？如果我建议的答案不起作用，也许您现在已经有了答案，您可以回答自己的问题并接受它：这种方法在某些条件下有效。但是我需要的答案不是这个。我没有回答这个问题，因为可能还有另一个可能的答案可以解决这个问题。我一直在忙于应用程序的其他部分，所以当我找到这个问题的解决方案时，我会相应地更新。好的，谢谢你的反馈。也许你可以ld在问题中添加更多信息，突出我的两个建议解决方案无法解决的情况？顺便说一句，抱歉“唠叨”还有我评论中的责备语气。当OP长时间没有对某个问题做出回应时，这看起来很糟糕，即使这个人在其他问题上很活跃。有些人只是问问题，然后再也不回来接受答案或表示感谢，这与Stackoverflow的想法背道而驰。但我也可以看到可能会出现ot她没有立即回复的原因，如果我不公平，我很抱歉。没关系！正如我上面提到的。我很重视你的回答，它确实在一定程度上帮助我解决了这个问题。因此，当我找到解决方案时，我将自己提供解决方案。感谢你的洞察力。：）我对什么是过滤和过滤方法感到非常困惑ally for，但是如果我没有错的话，Filter将在视图上获取Filter类型，Filter方法是实现Filter本身。如果我错了，请纠正我。

const customOptionsFilter = ({filter, onChange}) => {
      return(
        <select
          onChange={e => onChange(e.target.value)}
          style={{  width: '100%'  }}
          value={filter ? filter.value : 'all'}
          >
          <option value='all'>Show All</option>
          {
            exampleList.map( k => {
              return <option key={k.toString()} value={k}>{k}</option>
            })
          }
        </select>
      )
    }



const customOptionsFilterMethod = (filter, row) => {

      if(filter.value === '') { return true }

      if(exampleList.includes(filter.value)){
        return row[filter.id] === filter.value
      } else { return true }

    }