如何使用狀態管理在 React 中切換元素可見性？

在 React 中顯示和隱藏元素

React 提供了多種方法來根據特定事件或條件動態控制元素的可見性。讓我們探索其中一種技術。

在您的程式碼片段中，您的目標是在點擊「搜尋」元件的按鈕時顯示或隱藏「結果」元件。為此，我們可以利用 React 提供的狀態管理功能。

使用 React Hooks（適用於 React 16.8 版本）

使用 React hooks，您可以更有效地管理元件狀態。在您的搜尋元件中，定義一個名為 showResults 的狀態變數並將其初始值設為 false。然後，在handleClick函數中，使用setShowResults setter將state更新為true，觸發重新渲染。

<code class="javascript">import React, { useState } from 'react';

const Search = () => {
  const [showResults, setShowResults] = useState(false);

  const handleClick = () => {
    setShowResults(true);
  };

  return (
    <div className="date-range">
      <input type="submit" value="Search" onClick={handleClick} />
    </div>
  );
};</code>

在Results元件中，可以使用條件渲染，僅在showResults時顯示結果為 true。

<code class="javascript">const Results = () => {
  return (
    <div id="results" className="search-results">
      Some Results
    </div>
  );
};</code>

在渲染方法中，您可以根據 showResults 的值有條件地渲染 Results 元件。

<code class="javascript">render() {
  return (
    <div>
      <Search />
      {showResults && <Results />}
    </div>
  );
}</code>

以上是如何使用狀態管理在 React 中切換元素可見性？的詳細內容。更多資訊請關注PHP中文網其他相關文章！