ボタンをクリックした後、React.jsにBootstrap5モーダルが表示されない

debugcn 投稿 Dev

user9437856

私はbootstrap5を使用して反応しています。私はreactでbootstrap5を正常にインストールしました。次に、ページにモーダルを表示する必要があるため、ページにボタンとモーダルコードを追加しました。

以下は、私がモーダルに使用しているコードです。今、私はボタンをクリックします、そして何も機能していません。モーダルが取得できません。

この問題について私を助けてくれませんか？

import React from "react";

function addEmployee(){
    return(
<div className="addEmployee">
<button type="button" className="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">Add Employee</button>

<div className="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabIndex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div className="modal-dialog">
    <div className="modal-content">
      <div className="modal-header">
        <h5 className="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div className="modal-body">
        ...
      </div>
      <div className="modal-footer">
        <button type="button" className="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" className="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>


</div>

    )
}
export default addEmployee;

IAMSTR

私はあなたがreact-bootstrapそれをはるかに簡単に使用することをお勧めします、そしてjavascriptはあなたのために行われました

React-BootstrapはBootstrapJavaScriptを置き換えます

各コンポーネントは、jQueryのような不要な依存関係なしに、Reactコンポーネントとしてゼロから構築されています。

開始するには、パッケージをインストールするだけです npm install react-bootstrap bootstrap

この例を見てください

import { Modal, Button } from "react-bootstrap";
function Example() {
  const [show, setShow] = useState(false);

  const handleClose = () => setShow(false);
  const handleShow = () => setShow(true);

  return (
    <>
      <Button variant="primary" onClick={handleShow}>
        Launch demo modal
      </Button>

      <Modal show={show} onHide={handleClose}>
        <Modal.Header closeButton>
          <Modal.Title>Modal heading</Modal.Title>
        </Modal.Header>
        <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onClick={handleClose}>
            Close
          </Button>
          <Button variant="primary" onClick={handleClose}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
    </>
  );
}

render(<Example />);

GauravSinghalのブログ@PluralSight

内部状態を使用して値を設定し、コンポーネントの動作を変更する制御されたコンポーネントを使用する必要があります。jQueryのようなライブラリは直接DOM操作を行いますが、Reactコンポーネントは仮想DOMを使用してブラウザー上の実際のDOMを変更します。jQueryを使用してコンポーネントの動作を変更することは可能です。それでも、予期しない結果が発生し、デバッグが困難になります。React Bootstrapは各コンポーネントを純粋なReactで実装するため、BootstrapのjQueryへの依存性について心配する必要はありません。

ここにあなたが続くことができるリンクがあり、その（反応-ブートストラップ）ドキュメントページをチェックアウトする/に行き、ブートストラップを反応させます

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]