reactjs在地图功能内切换启用/禁用按钮

Question

我有一个地图功能，它可以旋转两个按钮 A 和 D。

我的问题是我正在尝试切换 A 和 D 的活动状态。 由于它在一个循环中，如果我改变一行的状态，它 也会影响其他行。实现 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>
                            })}

我的问题是我想在按钮 A 和 D 之间切换。所以当我点击A时，D应该是活跃的，当我点击D时，A应该是活跃的。

Answer 1

我想我可以给你一个想法。试试这样的，

<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>

希望适合你的情况。