OnClick Открыть все выпадающее меню в строках таблицы
наличие n выпадающих меню в React JS. Когда я нажимаю n-й пункт меню, я хочу открыть соответствующее выпадающее меню. Но то, что я получаю сейчас, это то, что при нажатии на пункт меню открываются все раскрывающиеся списки. Как этого можно достичь?
Код:-
const [isActive, SetisActive] = useState(false);
{
PlaylistData && PlaylistData.map((playdata) => {
return (
<td >
<div className = "Dropdown">
<div className = "Dropdown_btn" onClick = {(e) => SetisActive(!isActive)}>{playdata.ChannelName}</div>
{isActive && (
Channelname.map((val, id) => {
{
return (
<Fragment key = {id}>
{removeRedundant([...val, playdata.ChannelName]).map((val1) => {
return (
<div className = "dropdown_content">
<div className = "dropdown_item"
onClick = {(e) => { setPlayer(val1, playdata.idx, StoreIdx) }}>{val1}</div>
</div>
)
})}
</Fragment>
)
}
})
)}
</div>
</td>
Ответы 1
Вместо того, чтобы устанавливать значения true/false для вашего isActive, вы должны установить идентификатор меню, которое вы хотите открыть.
Я изменил название вашего состояния с isActive на activeMenu, чтобы оно соответствовало присвоенному значению.
const [activeMenu, setActiveMenu] = useState(); //as no opening menu initially
Измените свой onClick (я не знаю, у вашего playdata есть уникальный идентификатор или нет, поэтому я использую ChannelName. Если ваши данные имеют id, вы должны использовать его вместо этого)
onClick = {(e) => setActiveMenu(playdata.ChannelName)}
Последняя часть, которую вам нужно сделать, это просто сравнить свое состояние с текущим пунктом меню в списке.
{activeMenu === playdata.ChannelName && (Channelname.map((val, id) => <elements></elements>)
Если вы хотите сделать это поведение, вам нужно изменить onClick вот так onClick = {(e) => activeMenu === playdata.ChannelName ? setActiveMenu(null) : setActiveMenu(playdata.ChannelName)}. Если ваше активное меню совпадает с состоянием, вы устанавливаете значение null, чтобы свернуть меню @ANITAKUMARI
спасибо, это работает, пожалуйста, скажите мне, что он работает в соответствии с идентификатором строки таблицы (открыть), но когда я нажимаю его снова 2 раза, он не закрывается в 1 строке, но когда я нажимаю на 2 строки, раскрывающийся список 1 строки закрывается.