如何使用2个输入字段react过滤2个数组？

使用2个输入字段react过滤2个数组可以通过以下步骤实现：

创建一个React组件，包含两个输入字段和两个数组。
在组件的状态中定义两个变量，分别用于存储输入字段的值和过滤后的数组。
监听输入字段的变化事件，将输入字段的值更新到对应的状态变量中。
使用数组的filter()方法对两个数组进行过滤，根据输入字段的值进行匹配。
将过滤后的数组更新到对应的状态变量中。
在组件的渲染方法中，使用过滤后的数组来展示数据。

以下是一个示例代码：

import React, { useState } from 'react';

const FilterArrays = () => {
  const [input1, setInput1] = useState('');
  const [input2, setInput2] = useState('');
  const [filteredArray1, setFilteredArray1] = useState([]);
  const [filteredArray2, setFilteredArray2] = useState([]);

  const array1 = ['apple', 'banana', 'cherry'];
  const array2 = ['dog', 'cat', 'elephant'];

  const handleInputChange1 = (event) => {
    const value = event.target.value;
    setInput1(value);
    setFilteredArray1(array1.filter(item => item.includes(value)));
  };

  const handleInputChange2 = (event) => {
    const value = event.target.value;
    setInput2(value);
    setFilteredArray2(array2.filter(item => item.includes(value)));
  };

  return (
    <div>
      <input type="text" value={input1} onChange={handleInputChange1} />
      <input type="text" value={input2} onChange={handleInputChange2} />

      <h3>Filtered Array 1:</h3>
      <ul>
        {filteredArray1.map(item => <li key={item}>{item}</li>)}
      </ul>

      <h3>Filtered Array 2:</h3>
      <ul>
        {filteredArray2.map(item => <li key={item}>{item}</li>)}
      </ul>
    </div>
  );
};

export default FilterArrays;

在上述示例中，我们创建了一个React组件FilterArrays，包含两个输入字段和两个数组array1和array2。通过监听输入字段的变化事件，我们将输入字段的值更新到对应的状态变量中，并使用filter()方法对数组进行过滤。最后，我们在组件的渲染方法中展示过滤后的数组。

请注意，上述示例中没有提及腾讯云相关产品和产品介绍链接地址，因为这些信息与问题的内容无关。如需了解腾讯云的相关产品和服务，请访问腾讯云官方网站。