如何在 React Js 中过滤两个或多个字段

Question

我在一个数组中有 1000 个以下类型的对象，还有一些我没有提到的其他属性”

{
   "company": "Seattle Sutton",
   "owner": "Gartling",
   "city" "Des Moines"
   "otherproperties": ...
}

{
   "company": "Starbucks",
   "owner": "Schultz",
   "city" "Cleveland"
   "otherproperties": ...
}

界面如下：

 <input onChange={handleChange} type=checkbox value="Seatle Sutton" />
<input onChange={handleChange} type=checkbox value="Starbucks" />
<input onChange={handleChange} type=checkbox value="Caribou" />

 <input onChange={handleChange} type=checkbox value=Gartling" />
<input onChange={handleChange} type=checkbox value="Schultz" />
<input onChange={handleChange} type=checkbox value="Leland" />

 <input onChange={handleChange} type=checkbox value="Des Moines" />
<input onChange={handleChange} type=checkbox value="Cleveland" />
<input onChange={handleChange} type=checkbox value="Tenessee" />

我的过滤器目前在 onChangeHandler

const handleChange = (e) => {
const value = e.target.value;
const checked = e.target.checked;
if (checked){
    setFieldsSelectedArray([... fieldSelectedArray, value])
}else {
     setFieldSelectedArray(fieldSelectedArray.filter((e)=>(e!== value));
}
}

基本上，如果您单击一个复选框，它就会添加到 fieldSelectedArray，如果您取消选择一个复选框，它就会从该数组中删除。 很简单。

过滤器需要获取已单击的所有不同字段的数组，然后从总数据集中过滤数组中的值。

resultSet.filter(function(result){
      return !fieldSelectedArray.includes(result.company);
    }

如果只有一个值，例如只有公司或所有者，这很好，但是如果我尝试过滤 2 个或更多值，则无法知道我是否有一组 fieldSelectedArray 项目，这些项目只有公司或公司和所有者和城市。 这意味着我需要一个过滤器

resultSet.filter(function(result){
      return !fieldSelectedArray.includes(result.company && result.owner);
    }

我不确定我是否说清楚了，但没有示例说明如何处理这种情况。 有没有人遇到过这样的问题。 我已经看到它完成了，但我能想到的唯一方法是使用标志的漫长而混乱的方式。 任何帮助将不胜感激。

Answer 1

这是codesandbox日志记录，如您所愿。

让我们有一个数据数组，其中包含您上面共享的对象。 这次它包含不同的每个人的唯一标识符。

const data = [
  {
    id: 1,
    company: "Seattle Sutton",
    owner: "Gartling",
    city: "Des Moines",
    otherproperties: "..."
  },
  {
    id: 2,
    company: "Starbucks",
    owner: "Schultz",
    city: "Cleveland",
    otherproperties: "..."
  }
];

除了在上面的问题中声明相同的变量和处理程序 function 之外，在 return 语句中只有映射 function data.map((data) => {以便为数据数组中的每个对象动态创建复选框。

export default function App() {
  const [fieldSelectedArray, setFieldSelectedArray] = useState([]);

  const handleChange = (e) => {
    const value = e.target.value;
    const checked = e.target.checked;

    if (checked)
      setFieldSelectedArray([
        ...fieldSelectedArray,
        data.find((element) => value == element.id)
      ]);
    else
      setFieldSelectedArray(
        fieldSelectedArray.filter((element) => element.id !== value)
      );
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      {data.map((data) => {
        return (
          <>
            <input onChange={handleChange} type="checkbox" value={data.id} />
            <label>{data.company}</label>
          </>
        );
      })}
    </div>
  );
}

然后，只需编辑声明的 handleChange function 即可，因为它以相同的方式匹配需求。 为了将目标 ID 与data object 和fieldSelectedArray ，需要确保我们的复选框将其ID 作为值，即使它们将公司名称表示为 label 。

如果您对其中的任何部分有任何其他问题或解释，请告诉我。