单击带有反应钩子的工具组件 [英] toogle component on click with react hooks

问题描述

我在点击 div 时切换组件.单击时它会向下，但再次单击时不会关闭我做错了什么?

导出默认函数 Shiva() {const [loan, setLoan] = useState(false);const handleClick = () =>{设置贷款(真)；}返回 (<div className=""><div className=""><div className="loan-type-select";onClick={handleClick}><div className=""><img src="";/>

<p>SBA 7A贷款</p>{贷款 ?<数据/>: '' }

解决方案

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

const handleClick = () =>{设置贷款(真)；}

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

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

const handleClick = () =>{设置贷款(！贷款)；}

I'm toggling a component while clicking on div . It toogle down when clicked but does not close when clicked again what am i doing wrong?

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>

解决方案

Look closely at your click handler:

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

Regardless of the current state of loan, it will always set the new state of loan to true.

If you want to close it when it's open, toggle the current state instead of passing true.

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

这篇关于单击带有反应钩子的工具组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！