Блог

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

если я нажму кнопку 1 div 1 должен открыться, если я нажму кнопку 2 div 2 должен открыться

Как это написать.нажмите в функциональном компоненте, пожалуйста, помогите мне

 const [dropdownOpen, setdropdownOpen] = useState(false);
const handleDropdown = () =>{
    setdropdownOpen(!dropdownOpen)
} 

 div{
display:none
}

.dropdown-menu.show{
display:block
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<button type="button" onClick={handleDropdown}>Button 1</button>
<button type="button" onClick={handleDropdown}>Button 2</button>
<button type="button" onClick={handleDropdown}>Button 3</button>

 <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 1
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 2
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 3
 </div> 

Если у вас есть три дива, вам нужны три значения состояния. Вы можете использовать объект, массив или три разных крючка useState.

Вот пример использования массива:

 const [dropdownOpen, setdropdownOpen] = useState([false,false,false]);
const handleDropdown = (idx) => {
    setdropdownOpen(dropdownOpen.map((v,i) => i === idx ? !v : v)
}


<button type="button" onClick={handleDropdown(0)}>Button 1</button>
<button type="button" onClick={handleDropdown(1)}>Button 2</button>
<button type="button" onClick={handleDropdown(2)}>Button 3</button>

 <div className={`dropdown-menu ${dropdownOpen[0] === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 1
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen[1] === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 2
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen[2] === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 3
 </div>
 

Я думаю, что здесь вам следует использовать состояние массива. Мне кажется, это самый простой способ сделать это для меня. Все divs и соответственно buttons должны иметь свою отдельную переменную состояния. И переключение их должно сделать свое дело.

Чтобы однозначно идентифицировать, вы можете использовать a data-attribute для привязки кнопки к ее div. Я использовал data-reactid .

Чтобы сохранить его универсальным, приведенный ниже код просто сопоставляется с массивом для создания различных divs . Вторая argument функция обратного вызова карты-это индекс, поэтому она используется.

 const [dropdownOpen, setdropdownOpen] = useState([false,false,false]);
const handleDropdown = (e) =>{
    let newArray=  [...dropdownOpen];
    newArray[e.target.dataset.reactid] = !newArray[e.target.dataset.reactid];
    setdropdownOpen(newArray)
} 

 div{
display:none
}

.dropdown-menu.show{
display:block
} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<button type="button" onClick={handleDropdown} data-reactid={1}>Button 1</button>
<button type="button" onClick={handleDropdown} data-reactid={2}>Button 2</button>
<button type="button" onClick={handleDropdown} data-reactid={3}>Button 3</button>

{dropdownOpen.map( (x,index) => {
return <div className={`dropdown-menu ${x === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 `Div ${index 1}`
 </div>
}) 

Примечание: Фрагмент кода не работает. Я только что скопировал твой.

 const handleDropdown = (id) =>{
   if(id==='div1'){
   setdropdownOpen(true)
   }
   if(id==='div2'){
   setdropdownOpen(true)
   }
    if(id==='div3'){
   setdropdownOpen(true)
   }   
}


<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<button type="button" onClick={() =>handleDropdown('div1')}>Button 1</button>
<button type="button" onClick={() =>handleDropdown('div2')}>Button 2</button>
<button type="button" onClick={() =>handleDropdown('div3')}>Button 3</button>

 <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 1
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 2
 </div>
 
  <div className={`dropdown-menu ${dropdownOpen === true ? "show" : "hide"}`} aria-labelledby="dropdownMenuLink">
 Div 3
 </div>