Reactjs 如何将用户分配到按钮以阻止用户？

我得到了用户列表，在每个用户旁边都有一个阻止按钮。 单击块按钮后，会弹出一个模式，要求确认。当我确认时，特定用户正在被阻止

现在我得到了显示模式，但在点击确认按钮后，什么也没发生。 我想我需要为按钮分配一个用户？ 解锁按钮工作，但不在模式中

我的代码：

import MyModal from '@/views/MyModal'

function UsersList({ users, userId }) {
  function locking(pk, action) {
    axios.get(`/user/${pk}/${action}/`).then(() => {
      update()
    })
  }

  return (
          ...{users != null && users.length > 0 ? (
            users.map((profile) => {
              return (
                <tr key={profile.id} id={profile.id} className={userId === profile.id ? 'table-active' : ''}>
                  {showEntities && <td className='align-middle'>{profile.entity_name}</td>}
                  <td className='align-middle'>
                    {profile.first_name} {profile.last_name}
                    {!profile.active && (
                      <span className='ml-xl-2 badge badge-pill badge-secondary'>
                        <i className='fa fa-lock' /> Blocked
                      </span>
                    )}
                  </td>...
                    {profile.id !== userId && //to be sure to not block myself
                      (profile.active ? (
                        <button
                          type='button'
                          className='btn d-block btn-danger w-5rem mb-2 badge'
                          data-toggle='modal'
                          data-target='#MyModal'
                        >
                          Block
                        </button>
                      ) : (
                        <a
                          className='btn d-block btn-warning w-5rem mb-2 badge'
                          href='#'
                          onClick={() => {
                            locking(profile.id, 'unlock')
                          }}
                        >
                          Unblock
                        </a>
                      ))}
                  </td>
                </tr>
              )
            })
          ) : (
          
          )}
        </tbody>
      </table>
      <MyModal locking={locking()} />
    </div>
  )
}
export default UsersList

从“@/views/MyModal”导入MyModal
函数UsersList（{users，userId}）{
功能锁定（主键、动作）{
get（`/user/${pk}/${action}/`）。然后（（）=>{
更新（）
})
}
返回(
…{users！=null&&users.length>0(
users.map（（配置文件）=>{
返回(
{showEntities&&{profile.entity_name}
{profile.first_name}{profile.last_name}
{！profile.active&&(
此 路 不通
)}
...
{profile.id！==userId&&//请确保不要阻止我自己
（profile.active(
块
) : (
))}
)
})
) : (
)}
)
}
导出默认用户列表

MyModal

export default function  MyModal({locking}) {
  return (
    <div className='modal fade' id='MyModal' tabIndex='-1' aria-labelledby='MyModal' aria-hidden='true'>
 ...
            <h5 className='modal-title' id='MyModal'>
              Are you sure to block this user?
            </h5>
            <button type='button' className='close' data-dismiss='modal' aria-label='Close'>
              <span aria-hidden='true'>&times;</span>
            </button>
          </div>
          <div className='modal-footer'>
            <button type='button' className='btn btn-default' data-dismiss='modal'>
              <i className='fas fa-times mr-2' />
              Exit
            </button>
            <button
              type='button'
              className='btn btn-success'
              onClick={() => {
                locking      
              }}
            >
              <i className='fas fa-check-circle mr-2' />
              Confirm
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default function  MyModal({locking}) {
  return (
    <div className='modal fade' id='MyModal' tabIndex='-1' aria-labelledby='MyModal' aria-hidden='true'>
      ...
            <button
              type='button'
              className='btn btn-success'
              onClick={locking} // <-- attach callback
            >
              <i className='fas fa-check-circle mr-2' />
              Confirm
            </button>
      ...
    </div>
  )
}

导出默认函数MyModal（{locking}）{
返回(
...
您确定要阻止此用户吗？
&时代；
出口
{
锁定
}}
>
证实
)
}

问题

没有用于阻止配置文件的单击处理程序

将

locking

传递到

MyModal

时，会立即调用它（

locking={locking（）}

）

在

MyModal

block按钮中，

onClick

callback

locking

未被调用（

（）=>{locking}

解决方案

将一些状态添加到

UserList

以存储要阻止/取消阻止的用户/配置文件id

创建块回调以传递给模态

将块回调传递给

MyModal

用户列表

function UsersList({ users, userId }) {
  const [profileId, setProfileId] = useState(null); // <-- create id state

  function locking(pk, action) {
    axios.get(`/user/${pk}/${action}/`)
      .then(() => {
        update();
      })
      .finally(() => {
        setProfileId(null); // <-- clear state when done
      });
  }

  const blockId = () => locking(profileId, 'lock'); // <-- callback to block/lock

  return (
          ...
          {users != null && users.length > 0 ? (
            users.map((profile) => {
              return (
                <tr key={profile.id} id={profile.id} className={userId === profile.id ? 'table-active' : ''}>
                  ...
                  </td>
                    ...
                    {profile.id !== userId && //to be sure to not block myself
                      (profile.active ? (
                        <button
                          type='button'
                          className='btn d-block btn-danger w-5rem mb-2 badge'
                          data-toggle='modal'
                          data-target='#MyModal'
                          onClick={() => setProfileId(profile.id)} // <-- set id to block
                        >
                          Block
                        </button>
                      ) : (
                        <a
                          className='btn d-block btn-warning w-5rem mb-2 badge'
                          href='#'
                          onClick={() => {
                            locking(profile.id, 'unlock')
                          }}
                        >
                          Unblock
                        </a>
                      ))}
                  </td>
                </tr>
              )
            })
          ) : (
          
          )}
        </tbody>
      </table>
      <MyModal locking={blockId} /> // <-- pass blockId callback
    </div>
  )
}

函数UsersList（{users，userId}）{
const[profileId，setProfileId]=useState（null）；//{
更新（）；
})
.最后（（）=>{
setProfileId（null）；//锁定（profileId，'lock'）；//0(
users.map（（配置文件）=>{
返回(
...
...
{profile.id！==userId&&//请确保不要阻止我自己
（profile.active(
setProfileId（profile.id）}//
块
) : (
))}
)
})
) : (
)}
//没有与阻止用户按钮关联的
onClick
回调。也许您应该/可以实现一个单击处理程序，以将配置文件id存储在状态中，并传递给模式以阻止用户。我如何才能做到这一点？我不是react js程序员，因此我不知道如何：（现在我看到我需要点击两次block按钮来显示modal。@Jmaria很有趣。你能把它复制到一个简单的codesandbox中并链接到这里吗？我得到了这个，我不得不在UserList@Jmaria对…TBH我不完全确定你的模态是如何打开的（因为我没有看到打开的道具通过），对我来说，你似乎正在使用引导/反应引导，所以我认为我有50/50的机会猜到正确的方向。我会更新我的答案。