如何在 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 。

如果您對其中的任何部分有任何其他問題或解釋，請告訴我。