Нашел данное применение хука useState, кто сможет объяснить что происходит в функции handleClick
const [state, setState] = useState(-1);
handleClick = (index) => {
setState(index === state ? -1 : index)
}
кто сможет объяснить что происходит в функции handleClick
Меняется значение стейтовой переменной state
по условию index === state
.
Если значения переменных index
и state
равны - запишется -1
... В противном случае - запишется значение переменной index
.
открывать и закрывать элемент аккордеона, активируется при нажатии на элемент аккордеона при помощи события onClick
Такой вот вариант могу предложить...
const data = [
{id: 1, name: 'Первый', txt: 'Текст первого'},
{id: 2, name: 'Второй', txt: 'Текст второго'},
]
const Item = props => {
const o = props.data
const cls = props.on ? 'on' : ''
const action = _ => props.act(props.ind)
return <li className={cls} onClick={action}>
<p>{o.name}</p>
<p>{o.txt}</p>
</li>
}
const App = props => {
const [arr, setArr] = React.useState(data)
const [state, setState] = React.useState(-1)
return <ul>
{arr.map((o, i) => <Item key={o.id} data={o} ind={i} act={setState} on={state === i} />)}
</ul>
}
const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);
li > p:last-child {
display: none;
}
li.on > p:last-child {
display: block;
}
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>
-1 значит акардеон закрыт полностью.
При клике сравнение: если кликнул по текущему индексу, то закрыть акардеон полностью, иначе переключить на другой элемент.
handleClick
... И что потом с этим делается так же не понятно... В самом вызовеconst [state, setState] = useState(-1);
- никакого криминала нет.true/false
это не события... Это значения. Если нужны именно они - почему изначально в стейт записывается-1
? Почему потом не пишетсяtrue/false
, а записывается-1
или значение переменнойindex
?