В настоящее время я пытаюсь создать этот дизайн.
Он не открывается и не закрывается должным образом. Я также создал codeandbox
Три вещи:
1. У меня есть onClick, но я не уверен, правильно ли мой logi c открывает и закрывает кнопку .Также должен ли быть здесь useEffect для прослушивания изменений?
const showPlatformOptions =()=> {
// let checkboxes = el;
// console.log("ref:",myRef.current)
// if (!expanded) {
// //checkboxes.style.display = "block";
// setExpanded(true);
// } else {
// // checkboxes.style.display = "none";
// setExpanded(false);
// }
}
У меня есть onChange под названием selectionOptions, который должен сообщить мне, какие платформы выбраны, но в настоящее время он показывает только одну платформу за раз, почему?
Является есть другой способ создать это раскрывающееся меню и флажок. Может быть, библиотека, использующая хуки?
Любая помощь приветствуется.
import React, { useState,useEffect, useRef} from "react";
const SearchBar =()=>{
const [query, setQuery] = useState("");
const [expanded,setExpanded] = useState(false);
const [selectionOptions, setSelectionOptions] = useState(["Instagram","LinkedIn","Twitter"]);
const myRef = useRef(null);
const showPlatformOptions =()=> {
// let checkboxes = el;
// console.log("ref:",myRef.current)
// if (!expanded) {
// //checkboxes.style.display = "block";
// setExpanded(true);
// } else {
// // checkboxes.style.display = "none";
// setExpanded(false);
// }
}
const handleQueryChange = event => {
console.log("Event:",event.target.value)
setQuery(event.target.value);
};
return (
<form onSubmit={showPlatformOptions}>
<div className="w-64">
<div className="relative" onClick={showPlatformOptions}>
<h6>PLATFORMS </h6>
<select className="w-full font-semibold" onChange={handleQueryChange}>
{selectionOptions.map((platform,x) => (
<option key={x} value={platform}>
{platform}
</option>
))}
</select>
<div className="absolute left-0 right-0 top-0 bottom-0"></div>
</div>
<div
ref={myRef}
className="checkboxes border-gray-200 border border-solid">
<label htmlFor="one" className="block ">
<input type="checkbox" id="one" onChange={handleQueryChange} className="m-3"/>
Instagram</label>
<label htmlFor="two" className="block">
<input type="checkbox" id="two" onChange={handleQueryChange} className="m-3"/>
LinkedIn</label>
<label htmlFor="three" className="block">
<input type="checkbox" id="three" onChange={handleQueryChange} className="m-3"/>
Twitter</label>
</div>
</div>
</form>
);
}