當 onClick 在 React 中時如何顯示單個 model？

Question

如何應用 function 以便在單擊 p 標簽時，應僅為該 p 標簽打開一個 react-bootstrap 模態，而不是為所有其他標簽打開。

我應該如何以這樣一種方式進行編碼，即當單擊p tag時，應該只為該 p 標簽打開一個模態，並且只打開一個模態，而不是同時打開

這是我的實時代碼https://codesandbox.io/s/distracted-water-suuuw?file=/App.js

export default function App() {
  const [modalShowing, setModalShowing] = useState(false);

  const [items] = useState({
    stude: [
      { id: "1", name: "AZ" },
      { id: "2", name: "AX" },
      { id: "3", name: "AY" },
      { id: "4", name: "AB" },
      { id: "5", name: "AQ" },
      { id: "6", name: "AE" }
    ]
  });

  const handleModel = () => {
    setModalShowing(true);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {items.stude.map(item => (
        <div key={item.id}>
          <p onClick={handleModel}>{item.name}</p>
          <Modal
            show={modalShowing}
            onHide={() => setModalShowing(false)}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
          >
            <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                ITEMS
              </Modal.Title>
            </Modal.Header>
            <Modal.Body>{item.name}</Modal.Body>
          </Modal>
        </div>
      ))}
    </div>
  );
}

Answer 1

不要創建多個模式，這是一種不好的做法。 在 map function 之外創建單個模態並使其內容動態化。 在 map function 中執行<p onClick={() => handleClick(item)} > 並在 state 中設置點擊的項目。 然后，在模態中，使用 state 中設置的項目。 就像是：

export default function App() {
  const [modalShowing, setModalShowing] = useState(false);
  const [selectedItem, setSelectedItem] = useState(null);

  const [items] = useState({
    stude: [
      { id: "1", name: "AZ" },
      { id: "2", name: "AX" },
      { id: "3", name: "AY" },
      { id: "4", name: "AB" },
      { id: "5", name: "AQ" },
      { id: "6", name: "AE" }
    ]
  });

  const handleModel = item => {
    setSelectedItem(item);
    setModalShowing(true);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      {items.stude.map(item => (
        <div key={item.id}>
          <p onClick={() => handleModel(item)}>{item.name}</p>
        </div>
      ))}

      <Modal
            show={modalShowing}
            onHide={() => setModalShowing(false)}
            size="lg"
            aria-labelledby="contained-modal-title-vcenter"
            centered
          >
            <Modal.Header closeButton>
              <Modal.Title id="contained-modal-title-vcenter">
                ITEMS
              </Modal.Title>
            </Modal.Header>
            <Modal.Body>{selectedItem.name}</Modal.Body>
          </Modal>

    </div>
  );
}

Answer 2

您可以將一些信息作為參數傳遞給您的處理程序。 如我所見，您正在使用 map function 所以可以這樣做。

例如（在 class 組件中）：

constructor(){
  this.state = {
   stude: [{ id: "1", name: "AZ" }, { id: "2", name: "AX" }]
   showModal: false,
   currentModalData: {}
  }
}

toggleModal = (item) => this.setState({showModal: true, currentModalData: item})

render(){
  return (
    {this.state.stude.map(item => <p onPress={()=>this.renderModal(item)}>{item.name}</p>)}
    {this.state.showModal && this.renderModal()}
  )
}

renderModal = () => (/*YOUR MODAL CODE*/)