Создадим функцию и назовем ее addValueToArray
, она будет навешиваться на все дивы, которые содержат описание, которое нужно достать при клике и сохранить. Значения будем хранить в массиве values
в стейте компонента. При сохранении знового значения в стейт использовал spread syntax, чтобы не вызвать мутацию стейта, что может привести к сайд эффекту.
Через currentTarget
- получить элемент, в котором в данный момент обрабатывается событие, а через textContent
- получить текстовое содержимое элемента и его потомков. Проверка черех indexOf
добавлена, чтобы уже существующие значения в массиве не попали в него снова.
Рабочий пример кода:
import React from "react";
import ReactDOM from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
values: []
};
this.addValueToArray = this.addValueToArray.bind(this);
}
addValueToArray(e) {
const { textContent } = e.currentTarget;
const { values } = this.state;
if (values.indexOf(textContent) === -1) {
this.setState({
values: [...this.state.values, textContent]
});
}
}
render() {
return (
<div>
<h1>Врачи</h1>
<div onClick={this.addValueToArray}>
<h5>хирург</h5>
</div>
<div onClick={this.addValueToArray}>
<h5>терапевт</h5>
</div>
<div onClick={this.addValueToArray}>
<h5>кардиолог</h5>
</div>
<div>
<h4>Кто был выбран?</h4>
<ul>
{this.state.values.map((value, index) => (
<li key={index}>{value}</li>
))}
</ul>
</div>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById("app"));
Результат:

Полезные ссылки: