Как получить элемент по которому кликнули?

Question

[fuckingawesomenigga]

class Item extends Component {
    render() {
		function selectItem(e) {
            alert('test');
        }
        return (
            <div className={s.item} onClick={selectItem}>
            	<div className={s.pic}>pic</div>
            	<div className={s.product}>Name</div>
            	<div className={s.lowprice}>9999RUB</div>
            	<div className={s.sale}>54%</div>
            </div>
        );
    }
}

таких эл-ов множество, как получить именно тот, по которому кликнули, чтоб добавить класс только ему?

Comments

[Роман Александрович]

у вас будет много таких элементов и вы их будете вот так по одному руками выводить ? Или все таки циклом ?

[fuckingawesomenigga]

Роман Александрович, через ajax буду получать из бд список.
Я понимаю, что можно привязать номер каждому элементу и через него подтягивать, но хотелось бы иначе.

Answer 1

[hzzzzl]

class Item extends Component {
    state = {selected: false}

    toggleSelected = () => { this.setState({selected: !this.state.selected}) }

    render() {
        return (
            <div className={`${s.item} ${this.state.selected ? 'selected' : ''}`} onClick={this.toggleSelected}>
            	<div className={s.pic}>pic</div>
            	<div className={s.product}>Name</div>
            	<div className={s.lowprice}>9999RUB</div>
            	<div className={s.sale}>54%</div>
            </div>
        );
    }
}