[英]reactjs toggle enable/disable button inside map function
I have a map function which spins up two buttons A
and D
.我有一个地图功能,可以旋转两个按钮
A
和D
。
My problem is I am trying to toggle the active state for A and D. Since its inside a loop, if I change the status for one row, it impacts other rows too.
我的问题是我试图切换 A 和 D 的活动状态。由于它在循环内,如果我更改一行的状态,它也会影响其他行。 What is the cleanest way to achieve tis.
什么是最干净的方式来实现 tis.
{props.fileNamesStatus.map((file) => {
return <li>
<div class="btn-group">
<input type="button" className="btn btn-secondary" value={file.fileName}></input>
<input type="button" value="A" className={`btnA ${file.fileStatus === 'A' ? 'btnDisable' : ''}`} onClick={handleChangeFileStatus}></input>
<input type="button" value="D" className={`btnD ${file.fileStatus === 'D' ? 'btnDisable' : ''}`} onClick={handleChangeFileStatus}></input>
</div>
</li>
})}
My problem is I want to toggle between button A
and D
.我的问题是我想在按钮
A
和D
之间切换。 So when I click on A
, D
should be active and when I click on D
, A
should be active.所以当我点击
A
, D
应该是活动的,当我点击D
, A
应该是活动的。
I think I could give you an idea.我想我可以给你一个主意。 Try something like this,
尝试这样的事情,
<input type="button" value="A" className="btnA" disabled={file.fileStatus === 'A'} onClick={handleChangeFileStatus}>
</input>
<input type="button" value="D" className="btnD" disabled={file.fileStatus === 'B'} onClick={handleChangeFileStatus}></input>
Hope that suits your case.希望这适合您的情况。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.