Question

我设立了一个部分。在我有一个县,一旦你点击人口,就将在那里展示。这一人群的数据被放在另一个部分。下面是人群。


function Places() {
  const [showModel, setShowModel] = useState(null)

  const handleToggleModel = (value) => {
    setShowModel(value)
  }

  return (
  <div className= hotel-container >
        <div
          className= hotel-container_groupA 
          onClick={() => handleToggleModel(auli)}
        >
          <Article imgUrl={auli} date= Sep 26, 2021  text= Aoli  />
          {showModel === auli && (
            <Model onClose={() => handleToggleModel(null)}>
              <div>
                <img src={auli} alt= #  />
              </div>
            </Model>
          )}
        </div>
)

目前已进入尾顿部分

const Model = ({ children, onClose }) => {


  return (
    <div className= model >
      <div className= model-content >
        {children}
        <button onClick={onClose}>Close</button>

      </div>
    </div>
  )
}

Answer 1

Issue here is your onClick for setting the showModel state to auli coinciding with close button on your popup. You should move the Model component out of div.

export function Places() {
  const [showModel, setShowModel] = useState(null)
  const handleToggleModel = (value) => {
    setShowModel(value)
  }

  return (
  <div className= hotel-container >
    <div
      className= hotel-container_groupA 
      onClick={() => handleToggleModel(auli)}
    >
    <Article imgUrl={auli} date= Sep 26, 2021  text= Aoli  />  
    </div>
    {showModel === auli && (
      <Model onClose={() => handleToggleModel(null)}>
        <div>
          <img src={auli} alt= #  />
        </div>
      </Model>
    )}
  </div>
)}

Answer 2

为了将这个问题与你重新处理部分未关闭的模式联系起来,检查的主要方面是:你在<>Model部分与pro>部分的互动。目标是确保在对近海纽点进行点击时,将showModel状态定在null上,这应当掩盖该模式。

页: 1

<><>Places Part

function Places() {
  const [showModel, setShowModel] = useState(null);

  const handleToggleModel = (value) => {
    setShowModel(value);
  };

  return (
    <div className= hotel-container >
      <div
        className= hotel-container_groupA 
        onClick={() => handleToggleModel(auli)}
      >
        <Article imgUrl={auli} date= Sep 26, 2021  text= Aoli  />
        {showModel === auli && (
          <Model onClose={() => handleToggleModel(null)}>
            <div>
              <img src={auli} alt= Auli  />
            </div>
          </Model>
        )}
      </div>
    </div>
  );
}

http://www.ohchr.org。

const Model = ({ children, onClose }) => {
  return (
    <div className= model >
      <div className= model-content >
        {children}
        <button onClick={onClose}>Close</button>
      </div>
    </div>
  );
};

http://www.ohchr.org。

State Management: Ensure setShowModel is properly toggling the state between null and the value (auli in this case). When null, the modal should not display; when auli, it should.
Event Propagation: When clicking the close button, ensure that event propagation is not causing issues. You can stop event propagation by adding event.stopPropagation() in the onClick handler within the Model component if necessary.
Conditional Rendering: Your conditional rendering logic ({showModel === auli && }) seems correct. Ensure that auli is a value that uniquely identifies the modal content and is not causing any conflicts or unexpected behavior.
Debugging: If the modal still doesn t close, add console.log statements inside your handleToggleModel function and the onClick handler of the close button to ensure they are being triggered as expected.

通过确保<handle ToggleModel正常运作,你应能展示和隐藏预期的这种模式。如果仍有问题,你不妨检查showModel的价值,以及何时更新的逻辑。

友情链接