单击带有react-hooks的工具组件

IT技术 javascript reactjs react-hooks
2021-05-07 04:05:01

我在单击 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>
2个回答

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

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

无论 的当前状态如何loan，它都会始终将 的新状态设置loan为true。

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

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

我想补充一点，而不是使用：

setLoan(!loan)

最好使用：

setLoan((preValue)=>{!preValue})

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

其它你可能感兴趣的问题
上一篇条件 API 调用并在 react-select 中发送数据 下一篇如何恢复未完成的项目