1

Нашел данное применение хука useState, кто сможет объяснить что происходит в функции handleClick

const [state, setState] = useState(-1);
    handleClick = (index) => {
        setState(index === state ? -1 : index)
    }
3
  • Не совсем понятна область видимости того handleClick... И что потом с этим делается так же не понятно... В самом вызове const [state, setState] = useState(-1); - никакого криминала нет.
    – ksa
    Commented 5 июн. в 12:33
  • ksa, handleClick используется для того чтобы открывать и закрывать элемент аккордеона, активируется при нажатии на элемент аккордеона при помощи события onClick (во время данного нажатия в функцию handleClick передается index), но я не могу понять саму строку setState(index === state ? -1 : index), и почему вместо этого в useState не передаются события true/false? Commented 5 июн. в 12:42
  • true/false это не события... Это значения. Если нужны именно они - почему изначально в стейт записывается -1? Почему потом не пишется true/false, а записывается -1 или значение переменной index?
    – ksa
    Commented 5 июн. в 12:57

2 ответа 2

0

кто сможет объяснить что происходит в функции 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>

0

-1 значит акардеон закрыт полностью.

При клике сравнение: если кликнул по текущему индексу, то закрыть акардеон полностью, иначе переключить на другой элемент.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.