嗨，我是 React 鉤子的新手，所以我正在練習在檢查和取消選中復選框輸入時顯示和隱藏 div。問題是主檔案上的狀態更新，我有處理它的函式，但在我實際擁有 div 的檔案中，它不會更新，所以它不會隱藏或顯示。
處理狀態變化的檔案：
import {react, useState} from "react";
export const Checker = () => {
const [checked, setChecked] = useState(true)
const clickHandler = () => {
setChecked(!checked)
console.log(checked)
}
return {checked, clickHandler, setChecked}
}
復選框所在的檔案：
import React from "react";
import { Extras, Wrapper } from "./extras.styles";
import { Checker } from "../hooks/useCheckboxes";
const Extra = () => {
const {checked, setChecked, clickHandler} = Checker()
return <>
<Extras>
<Wrapper>
<input type= 'checkbox' onClick={clickHandler} checked = {checked} onChange={e => setChecked(e.target.checked)}></input>
</Wrapper>
</Extras>
</>
}
export default Extra;
包含我想要顯示和隱藏的 div 的檔案：
import house from '../../icons/house.png'
import { Wrapper } from "./foto.styles";
import { Checker } from "../hooks/useCheckboxes";
import { Inside, Middle} from "./foto.styles";
const Home = () => {
const {checked} = Checker()
return <>
<Wrapper>
<Inside>
<Middle>
{checked && <House src={house}/>}
</Middle>
</Inside>
</Wrapper>
</>
}
export default Home;
uj5u.com熱心網友回復：
一些問題是：
Checker看起來你希望它是一個自定義鉤子，而不是一個 React 組件，所以應該呼叫它useChecker或類似的東西，而不是Checker- 您同時擁有更改處理程式和單擊處理程式。你應該只有一個。如果您希望新狀態來自復選框，則應使用
e.target.checked. 如果您希望新狀態翻轉舊狀態，請使用clickHandler您在Checker. - 當包含多個元素時，您只需要一個片段。如果您只有一個，則不需要片段。
const Extra = () => {
const { checked, setChecked, clickHandler } = useChecker()
return (
<Extras>
<Wrapper>
<input type='checkbox'checked={checked} onChange={clickHandler} />
</Wrapper>
</Extras>
)
}
uj5u.com熱心網友回復：
像那樣使用它
const {checked, clickHandler, setChecked} = Checker()
或者，如果您希望能夠自定義名稱，則需要使用陣列而不是物件。
函式回傳值。
return [checked, clickHandler, setChecked]
函式呼叫
const [checked, setChecked, clickHandler] = Checker()
并且為了約定遵循反應鉤子命名規則，將函式重命名為 useChecker() 而不是 Checker()
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/399027.html