如何在 React-Bootstrap 中處理多個模態？

Question

我正在使用React-Bootstrap和TypeScript構建一個 CRUD 應用程序。 我的Users頁面應該有兩個用於Create User和Edit User按鈕的模式。 我已經對編輯按鈕進行了編碼以打開Edit Modal ，並且工作正常。 我嘗試使用相同的方法打開Create Modal ，但它打開的是相同的編輯模式而不是創建模式。

有人可以告訴我應該如何更改我的代碼以使“ Create User ”按鈕起作用嗎？

這是我的代碼。

用戶.tsx

const Users = (props: Props) => {
  const [userList, setUserList] = useState<IList[]>([]);

  const [show, setShow] = useState(false);
  const [selected, setSelected] = useState(Object);
  const [updatedItem, setUpdatedItem] = useState();

  const getUsers = async () => {...};

  useEffect(() => {...}, [updatedItem]);

  const handleShow = () => setShow(true);
  const closeHandler = () => setShow(false);
  const userHandler = async (user: any) => {...};
  const updateHandler = async (user: any) => {...};
  const handleEdit = (selected: any) => {...};

  const createModal = (
    <>
      <Modal show={show} onHide={closeHandler} className="modal">
        <Modal.Header closeButton>
          <Modal.Title>Create User</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <UserForm
            userHandler={userHandler}
            closeHandler={closeHandler}
            updateHandler={updateHandler}
            formUpdate={false}
            userList={""}
          />
        </Modal.Body>
      </Modal>
    </>
  );

  const editModal = (
    <>
      <Modal show={show} onHide={closeHandler} className="modal">
        <Modal.Header closeButton>
          <Modal.Title>Edit User</Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <UserForm
            userHandler={userHandler}
            closeHandler={closeHandler}
            updateHandler={updateHandler}
            formUpdate={true}
            userList={selected}
          />
        </Modal.Body>
      </Modal>
    </>
  );

  return (
    <div>
      {/* <UserForm
        userHandler={userHandler}
        closeHandler={closeHandler}
        updateHandler={updateHandler}
        userList={""}
      /> */}

      <Button variant="danger" type="button" onClick={handleShow}>
        Create User
      </Button>

      {createModal}

      {userList.length > 0 ? (
        <UserTable
          deleteHandler={deleteHandler}
          handleEdit={handleEdit}
          userHandler={userHandler}
          closeHandler={closeHandler}
          updateHandler={updateHandler}
          userList={userList}
        />
      ) : (
        ""
      )}

      {editModal}
    </div>
  );
};

export default Users;

用戶窗體.tsx

type Props = {
  userHandler: (user: object) => void;
  userList: any;
  updateHandler: (user: object) => void;
  formUpdate?: boolean;
  closeHandler: () => void;
};

class UserForm extends Component<Props, State> {
 
  componentDidUpdate() {...}
  addUser = (e: any) => {...};
  update = () => {...};

  render() {
    return (
      <div>
        <Form onSubmit={this.addUser}>
          ...

          <Modal.Footer>
            {this.props.formUpdate ? (
              <>
                <Button
                  variant="outline-secondary"
                  className="modal-btn"
                  onClick={this.props.closeHandler}
                >
                  Cancel
                </Button>
                <Button
                  variant="danger"
                  className="modal-btn"
                  type="button"
                  onClick={this.update}
                >
                  Edit User
                </Button>
              </>
            ) : (
              <>
                <Button
                  variant="outline-secondary"
                  className="modal-btn"
                  onClick={this.props.closeHandler}
                >
                  Cancel
                </Button>
                <Button
                  variant="danger"
                  className="modal-btn"
                  type="submit"
                  onClick={this.addUser}
                >
                  Create User
                </Button>
              </>
            )}
          </Modal.Footer>
        </Form>
      </div>
    );
  }
}

export default UserForm;

Answer 1

您在兩個模型中使用相同的 boolean 標志show 。 您需要創建兩個不同的 state 來管理兩個模型。 現在，當您setShow(true)時，它將使模型可見，並且編輯模式位於創建用戶 model 的頂部。

  const [showCreateUserModal, setShowCreateUserModal] = useState(false);
  const [showEditUserModal, setShowEditUserModal] = useState(false);

對於創建用戶

<Modal show={showCreateUserModal} onHide={()=>setShowCreateUserModal(false)} className="modal">

對於創建用戶

<Modal show={showEditUserModal} onHide={()=>setShowEditUserModal(false)} className="modal">

然后更新代碼以使用兩種不同的狀態，而不是只使用一種。