Как скрыть поле при нажатии на тело, кроме кнопки, при использовании хуков ReactJS?

avatar
Rohit Verma
9 августа 2021 в 04:56
42
2
1

T имеет кнопку с полем, и поле будет скрываться/отображаться (переключаться) при нажатии кнопки. Теперь это работает нормально. Я хочу, чтобы при нажатии на тело, кроме кнопки, поле должно было скрываться.

Мой код:-

function App() {
  const [show, setShow] = useState(false);

return (
<div>
<button className="btn" onClick={() => setShow(!show)}></button>
  {show ? <div className="box"></div>
  : null}
</div>
);
}

export default App;

Спасибо за ваши усилия!

Источник
Danial
9 августа 2021 в 11:06
0

У вас все еще есть проблема?

Rohit Verma
9 августа 2021 в 12:03
0

нет, сейчас решил...

Ответы (2)

avatar
Danial
9 августа 2021 в 05:29
1

Есть много способов решить эту проблему. Но один из них, который я предпочитаю, делать это как модальные окна. Итак:

  1. Добавить фоновый div рядом с box, который показывает заднюю часть коробки
  2. Установите onClick на этом новом элементе div, чтобы скрыть поле
function App() {
  const [show, setShow] = useState(false);

 return (
      <div>
        <button className="btn" onClick={() => setShow(!show)}></button>
        {show && (
        <>
          <div style={{bottom:0 , top:0, right:0, left:0,position:"absolute"}} onClick={()=> setShow(false)}></div>
          <div className="box"></div>
        </>) 
        }
      </div>
      );

export default App;
avatar
MOHD SHAHZAIB
9 августа 2021 в 05:24
1

Если я правильно вас понял. Вы можете решить это так. Он закроет окно/модальное окно, если щелкнуть за пределами модального окна или тела

. 

function App() {
  const [show, setShow] = useState(false);

return (
<div>
<button className="btn" onClick={() => setShow(!show)}></button>
  {show ? 
<div onClick={() => setShow(false)} 
 style={{width: '100vw',
         height: '100vh', 
         position: 'absolute', 
         top: 0, 
         left: 0
 }}> 
  <div className="box" onClick={(e) => e.stopPropagation()}></div>
</div>
);
}

export default App;