將data-id傳遞給Bootstrap模式而無需使用jquery

Question

我已經看到許多類似的問題，並且使用Jquery的解決方案完全相同。 但是我不想在我的Reactjs上使用Jquery只是為了將id傳遞給模態。

這是我的代碼：

<!-- trigger to pop up modal -->
<button
          type="button"
          className="btn btn-sm btn-danger float-right"
          data-toggle="modal"
          data-target="#educationModalCenter"
          data-id={education._id} <!-- Here im trying to pass the ID -->
        >
          &times;
        </button>

<!-- Modals -->
<div
        className="modal fade"
        id="educationModalCenter"
        tabindex="-1"
        role="dialog"
        aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true"
      >
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5
                className="modal-title font-weight-bold"
                id="exampleModalLongTitle"
              >
                Delete Education
              </h5>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              Are you sure to delete this education? This cannot be undone.
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-primary"
                onClick={() => onClickDelete(education._id, pid)}
                data-dismiss="modal"
              >
                Sure
              </button>
              <button
                type="button"
                className="btn btn-secondary"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>

每次單擊“確定”按鈕時，都將采用第一個模態來刪除。 有沒有辦法使用jquery來完成此任務？

謝謝您的幫助！

更新

我嘗試了下面的解決方案，但沒有用。 這是我所做的：

// set id
const [id, setId] = useState(null)

const ngesetID = e => {
    e.preventDefault()

    let dataId = e.target.dataset["id"] || e.target.getAttribute("data.id")
    console.log("ini ada kaga")
    console.log(dataId) // it changes to current ID

    setId(dataId)
  }

useEffect(() => {
    console.log("ID terbaru")
    console.log(id) // Just to make sure and it really changed
  }, [id])

<!-- trigger to pop up modal -->
<button
          type="button"
          className="btn btn-sm btn-danger float-right"
          data-toggle="modal"
          data-target="#educationModalCenter"
          data-id={education._id} <!-- Here im trying to pass the ID -->
          onClick={e => ngesetID(e)}
        >
          &times;
        </button>

但是每次我從彈出模式中按下按鈕時，它總是指向第一個模式。

<button
       type="button"
       className="btn btn-primary"
       // onClick={() => onClickDelete(education._id, pid)}
       onClick={e => cobaDoang(e, id)} // the 'id' revert back to the first ID modal
       data-dismiss="modal"
    >
     Sure
</button>

我不確定我做錯了什么？

Answer 1

您不應該在ReactJS項目中使用jQuery，因為它本身就是一個Javascript框架。

為了實現您想做的事情，您可以在ReactJS中使用state，狀態會在狀態更改時更新DOM。

我建議將Redux用於狀態嚴重的項目，對於輕量級的狀態使用，可以考慮使用Hooks。

Answer 2

聲明一個類似於selectedId的變量，並在<button>和模式中使用它。

selectedId = '';
...
<button onClick={() => {selectedId = education._id}}>
...
<button onClick={() => onClickDelete(selectedId, pid)}>
...

在您的代碼段中：

<!-- trigger to pop up modal -->
<button
          type="button"
          className="btn btn-sm btn-danger float-right"
          data-toggle="modal"
          data-target="#educationModalCenter"
          onClick={() => {selectedId = education._id}}
        >
          &times;
        </button>

<!-- Modals -->
<div
        className="modal fade"
        id="educationModalCenter"
        tabindex="-1"
        role="dialog"
        aria-labelledby="exampleModalCenterTitle"
        aria-hidden="true"
      >
        <div className="modal-dialog modal-dialog-centered" role="document">
          <div className="modal-content">
            <div className="modal-header">
              <h5
                className="modal-title font-weight-bold"
                id="exampleModalLongTitle"
              >
                Delete Education
              </h5>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
                aria-label="Close"
              >
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div className="modal-body">
              Are you sure to delete this education? This cannot be undone.
            </div>
            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-primary"
                onClick={() => onClickDelete(selectedId, pid)}
                data-dismiss="modal"
              >
                Sure
              </button>
              <button
                type="button"
                className="btn btn-secondary"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>

Answer 3

Get the attr and store it in a state and use it wherever you want.



<button
          type="button"
          className="btn btn-sm btn-danger float-right"
          data-toggle="modal"
          data-target="#educationModalCenter"
          data-id={education._id} 
          onClick={this.openModel}
        />

openModel =(event)=>{
  let dataId = event.target.dataset['id'] or event.target.getAttribute("data.id");
  this.setState({dataId : dataId})
}