使用反应钩子切换组件 onclick

Posted 2023-02-16

【中文标题】使用反应钩子切换组件 onclick

【英文标题】：toogle component on click with react hooks

【发布时间】：2022-01-15 20:37:12

【问题描述】：

我在点击 div 时切换了一个组件。单击时它会向下移动，但再次单击时它不会关闭我做错了什么？

export default function Shiva() 
    const [loan, setLoan] = useState(false);
    const handleClick = () => 
        setLoan(true);      
    
return (
<div className="">
    <div className="">
        <div className="loan-type-select" onClick=handleClick>
            <div className="">
                <img src="" />
            </div>
            <p>SBA 7A Loan</p>
            loan ? <Data /> : '' 
        </div>
    </div>
</div>

【参考方案1】：

仔细查看您的点击处理程序：

const handleClick = () => 
    setLoan(true);      

不管loan的当前状态如何，它都会将loan的新状态设置为true。

如果你想在它打开时关闭它，切换当前状态而不是传递true。

const handleClick = () => 
    setLoan(!loan);

【讨论】：

由于 react setState 是异步调用，所以最好使用之前的值而不是状态值。 setLoan(prevLoan => !prevLoan)

当状态设置器可能在重新渲染之前被 else 调用时，该技术很有用，但这里不是这种情况，在这种情况下它只会导致更多语法噪音无益于海事组织。

这似乎很容易，但作为初学者似乎很费时间来解决它。谢谢！你的回复很有帮助！ @CertainPerformance

【参考方案2】：

我想添加它而不是使用：

setLoan(!loan)

最好用：

setLoan((preValue)=>!preValue)

这样可以确保您不会遇到任何问题（您正在更改以前的值而不是更改实际值）。