更改HookonClick中的值-有解無憂

我有一個自定義的 Hook 可以將使用狀態變數的狀態從 true 更改為 false，我想在單擊按鈕時更改它以顯示和隱藏 div，如何做到這一點？

import { useEffect, useState } from 'react';

export const useOpenFiltersHook = (): boolean => {
  const [showFilter, setShowFilter] = useState(false);

  useEffect(() => {
    function handleShowFilter(): void {
      setShowFilter(true);
    }

    window.addEventListener('resize', handleShowFilter);
    handleShowFilter();

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return showFilter;
};

 const showFilter = useOpenFiltersHook();
{showFilter && (
        <div>
          <button onClick={() => !showFilter}>
            <div>Show filter</div>
          </button>
        </div>
      )}

uj5u.com熱心網友回復：

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

type TOpenFilterHook = {
  showFilter: boolean;
  setShowFilter: any;
}

export const useOpenFiltersHook = (): TOpenFilterHook => {
  const [showFilter, setShowFilter] = useState(false);

  useEffect(() => {
    function handleShowFilter(): void {
      setShowFilter(true);
    }

    window.addEventListener('resize', handleShowFilter);
    handleShowFilter();

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return { showFilter, setShowFilter };
};


... ... ...

const { showFilter, setShowFilter } = useOpenFiltersHook();
  {showFilter && (
    <div>
      <button onClick={() => setShowFilter(false)}>
        <div>Show filter</div>
      </button>
    </div>
  )}

uj5u.com熱心網友回復：

從你的鉤子回傳setShowFilter并呼叫它onClick

uj5u.com熱心網友回復：

我更新了 Bikas Lin 的答案。大多數情況下它是正確的，但很少有問題。

函式宣告不應該在那里。目前它總是在初始化后打開，所以更好的方法是：

import { useEffect, useState } from 'react';

export const useOpenFiltersHook = (isOpened): boolean => {
  const [showFilter, setShowFilter] = useState(isOpened);

  function handleShowFilter(): void {
    setShowFilter(true);
  }

  useEffect(() => {
    window.addEventListener('resize', handleShowFilter);

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return { showFilter, setShowFilter };
};

因此，現在您可以設定是否希望它最初顯示。您還可以將切換邏輯包含到您的鉤子中，因此您不需要在所有組件中都這樣做。根據您的情況，您可以只回傳切換函式而不是 setShowFilter，或將其添加為第三個屬性。

uj5u.com熱心網友回復：

這不是在反應中更新狀態的方法

 <button onClick={() => !showFilter}>

而是從您的自定義掛鉤回傳狀態更新函式

export const useOpenFiltersHook = (): boolean => {
  const [showFilter, setShowFilter] = useState(false);

  useEffect(() => {
    function handleShowFilter(): void {
      setShowFilter(true);
    }

    window.addEventListener('resize', handleShowFilter);
    handleShowFilter();

    return () => window.removeEventListener('resize', handleShowFilter);
  }, []);
  return { showFilter, setShowFilter };
};

現在您可以通過以下方式訪問組件中的設定狀態功能

 const {showFilter, setShowFilter } = useOpenFiltersHook();
{showFilter && (
        <div>
          <button onClick={setShowFilter((previousState)=> return !previousState)}>
            <div>Show filter</div>
          </button>
        </div>
      )}

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/533287.html

標籤：javascript反应打字稿反应钩子

上一篇：有沒有辦法在打字稿中撰寫條件映射型別？[復制]

下一篇：如何找到地圖元素的正確型別？