Блог

Главная - Вопросы по программированию - Необходимо, чтобы при нажатии на «первый блок» остальные блоки закрывались, как это сделать?

Необходимо, чтобы при нажатии на «первый блок» остальные блоки закрывались, как это сделать?

#javascript #reactjs

Вопрос:

мне нужно, чтобы при нажатии на один блок открывался вход (уже реализованный), а другой блок закрывался, пожалуйста, помогите. Вот мой код: я уже понял, что появляется ввод onClick, но не могу справиться с другими

 function App() { const [isChecked, setIsChecked] = useState(false) const [isClosed, setIsClosed] = useState(false)  const handleCheck = () =gt; {  setIsChecked(isChecked =gt; !isChecked) } const handleClose = () =gt; {  setIsClosed(isClosed =gt; !isClosed) }

возвращение (

 lt;div className="App"gt;   lt;div onClick={handleCheck}gt;block onelt;/divgt;  {isChecked amp;amp;  lt;input/gt;  }  lt;div onClick={handleClose}gt;block twolt;/divgt;  {isClosed amp;amp;  lt;input/gt;  }   lt;/divgt;

); }

Комментарии:

1. Мне нужно, чтобы «блок два» закрывался, когда я нажимаю на «блок один», который получает свой ввод, а также наоборот с другим блоком

2. Более подробная информация: когда вы нажимаете на первый блок, под ним должен выпадать вход, а второй блок должен скрываться. Ввод уже показан, проблема в том, что я не знаю, как скрыть второй блок при нажатии на первый

Ответ №1:

  import { useState } from "react" export default function App() {  const [isChecked, setIsChecked] = useState(false)  const [isClosed, setIsClosed] = useState(false)    const handleCheck = () =gt; {  setIsChecked(true)  setIsClosed(false)  }  const handleClose = () =gt; {  setIsClosed(true)  setIsChecked(false)  }  return(  lt;div className="App"gt;   lt;div onClick={handleCheck}gt;block onelt;/divgt;  {isChecked amp;amp;  lt;input/gt;}    lt;div onClick={handleClose}gt;block twolt;/divgt;  {isClosed amp;amp;   lt;input/gt;}      lt;/divgt;  )  }

Комментарии:

1. Я уже сделал это, зачем ты переписал мой код? Мне нужно, чтобы другие блоки закрывались, когда я нажимаю на определенный блок

2. Более подробная информация: когда вы нажимаете на первый блок, под ним должен выпадать вход, а второй блок должен скрываться. Ввод уже показан, проблема в том, что я не знаю, как скрыть второй блок при нажатии на первый

3. братан, я не переписывал твой код. Есть разница . Вы пробовали мой код, прежде чем комментировать?

4. да, я пытался. Вы кодируете ввод вызовов в блоках. Мой предыдущий код делал то же самое, за исключением того, что функция отображения или скрытия ввода работала для меня, а ваш код показывает только ввод. Напишите, что мне нужно было, чтобы снова решить мою проблему, пожалуйста, и попробуйте свой код самостоятельно. Я уже нашел решение, вы можете проверить, что мне нужно, в нижней части страницы моего вопроса.

Ответ №2:

сделай это

 function App() { const [isChecked, setIsChecked] = useState(true) const [isClosed, setIsClosed] = useState(true)  const handleCheck = () =gt; {  setIsChecked(isChecked =gt; !isChecked) } const handleClose = () =gt; {  setIsClosed(isClosed =gt; !isClosed) } return (  lt;div className="App"gt;   lt;div onClick={handleClose}gt;block onelt;/divgt;  {isChecked amp;amp;  lt;input/gt;  }  lt;div onClick={handleCheck}gt;block twolt;/divgt;  { isClosed amp;amp;  lt;input/gt;  }   lt;/divgt; ); }

Ответ №3:

Я справился со своей проблемой сам. Вот мой код:

 import { useState } from "react" export default function App() {  const [isChecked, setIsChecked] = useState(false)  const [isClosed, setIsClosed] = useState(false)   const handleCheck = () =gt; {  setIsChecked(isChecked =gt; !isChecked)  }  const handleClose = () =gt; {  setIsClosed(isClosed =gt; !isClosed)  }  return(  lt;div className="App"gt;  {  isClosed ? null : lt;div onClick={handleCheck}gt;block onelt;/divgt;  }  {isChecked amp;amp;  lt;input/gt;}  {  isChecked ? null : lt;div onClick={handleClose}gt;block twolt;/divgt;  }  {isClosed amp;amp;  lt;input/gt;  }     lt;/divgt;  )  }

Ответ №4:

Я думаю, что вы почти правильно поняли код с самого начала!

Вам нужно сделать условным div второго блока.

 lt;div onClick={handleCheck}gt;block onelt;/divgt; {isChecked amp;amp; lt;input/gt; }  {is Closed amp;amp; lt;div onClick={handleClose}gt;block twolt;/divgt; lt;input/gt; }

Это работает, верно?? 🙂

Комментарии:

1. я уже решил свою проблему, посмотрите на ответ самостоятельно

2. привет!! Да, я знаю, но я говорил вам о другом решении, потому что я не думаю, что два троичных — лучшее решение. Также потому, что оба они возвращают значение null, если условие истинно…лучше всего!

Метки: , ,