如何在收到用户输入后隐藏设置 div？在 React 应用程序中

Question

我有一个简单的测验应用程序，它从 API (https://opentdb.com/api.php?amount=100) 中获取问题，按难度过滤它们，并在 'Questions' 组件中呈现问题。我想在过滤后隐藏设置-显示问题时。

这是我的代码：

import React, { useEffect, useState } from "react";

import Questions from "./Questions";

const Welcome = () => {
  /*Fetch questions*/
  const questionsAPI = "https://opentdb.com/api.php?amount=100";
  const [questionsFromAPI, setQuestionsFromAPI] = useState([]);
  const [difficultyValue, setDifficulty] = useState("");
  const [filteredQ, setFilteredQ] = useState([]);

  const handleDifficultyChange = (event) => {
     setDifficulty(event.target.value);
   };

  const handleSearchReset = () => {
     setDifficulty("");
   };

  const fetchData = () => {
     return fetch(questionsAPI)
       .then((response) => response.json())
       .then((data) => setQuestionsFromAPI(data.results));
  };

   useEffect(() => {
      fetchData();
   }, []);

   useEffect(() => {
      setFilteredQ(
       questionsFromAPI.filter((q) => q.difficulty === difficultyValue)
      );
    }, [questionsFromAPI, difficultyValue]);

   return (
     <div>
       <h1>QUIZ</h1>
      
       **<div classname="setting">
        <h1>Search Posts</h1>
        <br />
        <p>difficulty</p>
        <input
          type="string"
          min={"difficulty"}
          value={difficultyValue}
          onChange={handleDifficultyChange}
        />
        <br />
        <button classname="button" type="button" onClick={handleSearchReset}>
          Reset Search
        </button>
        </div>**
     {filteredQ.length > 0 ? (
      <div>
          <Questions questionsAPI={filteredQ}></Questions>
      </div>
      ) : (
      <br></br>
     )}
   </div>
  );
};

export default Welcome;

Answer 1

在 React 元素中具有属性 hidden，您可以使用它来隐藏您的设置 div。例如通过使用钩子：

const [isHidden, hideSettings] = useState(false)

并在设置 div 中添加以下内容

<div hidden={isHidden} classname="setting">

过滤后使用hideSettings(true)

如何在收到用户输入后隐藏设置 div？在 React 应用程序中

How to hide the settings div after receving an input from the user ? in a React app

reactjs

fetch-api