reactjs 在Map数据中如何切换特定按钮而不影响其余按钮

0ejtzxu1 于 2023-01-12 发布在 React

关注(0)|答案(2)|浏览(124)

我有一个API，它返回一个数组中的用户列表，其中包含- userID、userName、profileImage等键。
const [UserLists, setUserLists] = useState([]) //for user data list store
我在前面提到的状态下存储了这个数组，我将提前Map它。

{UserLists !== undefined && UserLists.length > 0 ?
                                <Card className='mt-2' style={{ height: '45vh', overflow: 'auto', boxShadow: 'none' }} >
                                    {UserLists.map((obj, index) => { 
                                        return (<Card className='mt-4' key={index}>
                                            <div className='row cursor'>
                                                <div className='col-1'>
                                                    <Avatar src={obj.UserProfileImage !== null ? obj.UserProfileImage: <AssignmentIndOutlined />} alt="userProfile" style={{ height: '40px', width: '40px' }} />
                                                </div>
                                                <div className='col-8'>
                                                    <Typography variant='h6'>{obj.userName}</Typography>
                                                </div>
                                                <div className='col-3'>
                                                      <button className='primary-bg-button float-right w-50' onClick={() => handleInviteUser(obj.UserPenName, obj.UserID)}>Invite</button>
                                                </div>
                                            </div>
                                        </Card>)
                                    })}
                                </Card> : <div className='grid place-items-center h-screen'> <CircularProgress aria-label="Loading..." /> </div>
                            }

我想切换邀请按钮到删除按钮，一旦点击它，但它应该只与我点击的特定按钮切换，而不是它取代所有按钮或什么都没有发生。
我尝试使用布尔状态调用switchButton，并将此状态的默认值设置为FALSE。
按钮点击功能-

const handleInviteUser = (penName, UserID, obj) => {
       setswitchButton(true)  // to switch Invite button into remove
}

并在按钮上添加三元运算符-

{switchButton ? <button className='primary-border-button float-right w-50' onClick={() => handleRemoveInvitedUser(obj.UserID)}>Remove</button> : <button className='primary-bg-button float-right w-50' onClick={() => handleInviteUser(obj.UserPenName, obj.UserID, obj)}>Invite</button>}

它将所有邀请按钮切换为删除按钮。

reactjs

来源：https://stackoverflow.com/questions/75067788/in-mapped-data-how-to-switch-specific-button-without-affecting-rest-buttons

2条答案

按热度按时间

z31licg01#

问题是switchButton并不特定于每个被Map的用户，所以在设置每个按钮的状态时，您需要在Invite和Remove之间切换。
处理这个问题的一个更简单的方法是在用户对象上设置一个boolean属性，以检查该特定用户是否被邀请，这样您的对象将包含以下属性：

userId
userName
profileImage
userInvited

你可以在onClick和三元组中处理它，如下所示：
x一个一个一个一个x一个一个二个x

赞(0）回复(0）举报 2023-01-12

iyzzxitl2#

我找出了代码中缺少的东西，以实现预期的结果。
解决方案是这样的-因为我从API获取userList，所以我不想直接在响应中进行任何更改，但我将在存储列表的状态中进行更改*UserLists***
我所要做的就是单击邀请按钮，过滤用户列表中的用户ID**，并在其中添加一个对象。

const handleInviteUser = (penName, UserID) => {
        UserLists.filter(o => {  //for switch invite button to remove
            if (parseInt(o.UserID) === parseInt(UserID)) {
                return o.isInvited = true
            }
        })
    }

const handleRemoveInvitedUser = (userID) => {
         UserLists.filter(o => { //for switch remove button to invite
            if (parseInt(o.UserID) === parseInt(userID)) {
                return o.isInvited = false
            }
        })
    }
 

{obj.isInvited !== undefined && obj.isInvited === true ? <button className='primary-border-button float-right w-50' onClick={() => handleRemoveInvitedUser(obj.UserID)}>Remove</button> : <button className='primary-bg-button float-right w-50' onClick={() => handleInviteUser(obj.UserPenName, obj.UserID, obj)}>Invite</button>}

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs 在Map数据中如何切换特定按钮而不影响其余按钮

2条答案

相关问题

热门标签

最新问答