reactjs - React，如何将用户分配给按钮，以阻止用户？

Question

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

现在我得到了显示模式，但点击确认按钮后没有任何反应。我想我需要为按钮分配一个用户？解锁按钮有效，但它不在模式中。

我的代码：

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

我的模态

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

标签： reactjs

Answer 1

问题

1. 没有点击处理程序来阻止配置文件
2. 当传递locking给MyModal它时立即调用（locking={locking()}）
3. 在MyModal块按钮onClick回调locking 未被调用（() => { locking }

解决方案

1. 添加一些状态以UserList存储用户/配置文件 ID 以阻止/取消阻止
2. 创建一个块回调以传递给模态
3. 将块回调传递给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>
  )
}

我的模态

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