显示输入值的数据输入字段

Question

我的应用程序有一个带过滤器的模态 window。我想给它添加另一种过滤器。就是不知道怎么用React实现（也许你能帮我看代码，推荐链接）。

意思如下：我想让过滤器有一行，用户可以自己写一些值，回车，看到输入的结果（可以输入多个值）你可以过滤）。

可能是我解释的比较乱，另外我会提供一个想要的结果的截图：

Answer 1

export function ListItem({ itemValue }) {
  return (
    <div className="item">
      <span className="itemValue">{itemValue}</span>
    </div>
  );
}

export default function App() {
  const [itemList, setListItem] = useState([]);
  const [item, setItem] = useState("");
  const addValue = (event) => {
    setItem(event.target.value);
  };
  const listenEnter = (event) => {
    if (event.key === "Enter" && event.target.value !== "") {
      setListItem([...itemList, item]);
      setItem("");
    }
  };
  return (
    <div className="App">
      <input
        className="inputElement"
        placeholder="Enter Value"
        value={item}
        onChange={addValue}
        onKeyUp={listenEnter}
      />
      <div className="itemList">
        {itemList.map((item) => (
          <ListItem itemValue={item} />
        ))}
      </div>
    </div>
  );
}

整个代码https://codesandbox.io/s/elastic-meadow-h5kbxs

Answer 2

对于 UI，您可以使用或创建这样的自定义输入字段 https://evergreen.segment.com/components/tag-input。

实施：现在您有用户搜索的字段前-

const list =  [2,3,4,56,7,8,12,34,0,1]
const searchedItems =  [3,7,8]
const finalList= [];
function searchItems() {
   list.forEach(item => {
     searchedItems.forEach(ele => {
       if(ele===item) finalList.push(item);
   })
  });
  return finalList;
}
console.log(searchItems())

最后在您的搜索项结果中使用此数组。

显示输入值的数据输入字段

Data entry field displaying entered values

javascript

filter

reactjs