使用反应钩子切换组件 onclick答案

【问题标题】：toogle component on click with react hooks使用反应钩子切换组件 onclick
【发布时间】：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>

【问题讨论】：

标签： javascript reactjs react-hooks

【解决方案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})

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

【讨论】：