Не работает обработчик событий React

Question

При нажатии на "<button className="items" onClick={props.click("items")}>Товары" ничего не происходит. А при обновлении страницы в консоли уже изначально лежит "items", без каких-либо действий. Я новичок в React, только начал изучать, никак не могу найти простого объяснения как сделать обработчик клика по элементу. И еще вопрос, можно ли навесить обработчик клика на элемент <div> ?

App

function onClick (id) {
    console.log(id)
  }

  return (
    <div className="wrapper">
      <Head></Head>
      <Header click={onClick}></Header>
      
      <Main></Main>
    </div>
  );
}

export default App;

Компонент Header

function Header(props) {
    return (
        <div className="header">
            <img className="bar_icon" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/1200px-Hamburger_icon.svg.png"></img>
            <img className="ikea_logo" onClick={props.click("main")} src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c5/Ikea_logo.svg/2923px-Ikea_logo.svg.png"></img>
            <button className="items" onClick={props.click("items")}>Товары</button>
            <div className="rooms">Комнаты</div>
            <div className="inspiration">Вдохновение</div>
            <div className="services">Услуги</div>
            <div className="search">
                
                <input type="text" className="search_input" placeholder="Что вы ищете?"/>
                <img className="search_icon" src="https://cdn2.iconfinder.com/data/icons/ios-7-icons/50/search-512.png"></img>
                <span className="search_border"></span>
            </div>
            <div className="lookup"><img className="lookup_icon" src="https://cdn.icon-icons.com/icons2/902/PNG/512/truck_icon-icons.com_69284.png"></img></div>
            <div className="login"><img className="login_icon" src="https://icon-icons.com/icons2/1812/PNG/96/4213460-account-avatar-head-person-profile-user_115386.png"></img></div>
            <div className="shoppinglist"><img className="shoppinglist_icon" src="https://icons-for-free.com/iconfiles/png/512/heart-131965017458786724.png"></img></div>
            <div className="shoppingcart"><img className="shoppingcart_icon" src="https://icon-icons.com/icons2/1993/PNG/96/bag_buy_cart_market_shop_shopping_tote_icon_123191.png"></img></div>
     </div>
    )
}


export default Header;

Answer 1

сначала мы определяем функцию: function onClick() { ... }, затем мы ее вызываем onClick(). Т.е. для начала разделили понятия определение функции и вызов функции.

Обработчик onClick (как и любой другой) должен принимать определение функции, он сам будет ее вызывать при срабатывании: onClick={props.click} вместо onClick={props.click("items")}.

Но нам-то нужно что бы функция вызывалась с аргументами, есть разные способы это сделать, самый простой это обернуть вызов функции в обертку т.е. сделать из вызова функции - определение: function onClick1() { return props.click("items") }; и затем можно это определение функции передать в обработчик: onClick={onClick1}.

Стрелочная функция или нет не имеет значения (если внутри не используется this, но это другая история), для удобства вызов оборачивают прямо в обработчике: onClick={() => props.click("items")} (как написали в комментах), есть нюансы в такой записи, но в плане выполнения задачи получается то же самое.

БЛОГ НА HUSL

Не работает обработчик событий React

Ответы (1 шт):