Показать сообщение отдельно
  #8 (permalink)  
Старый 13.08.2021, 22:02
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,137

Fragman, вот тебе работающий тестовый пример...

import React from 'react';
import ReactDOM from 'react-dom';
//import './index.css';

const arr = [
	{ id: '1', header: 'Первая карточка', checked: false },
	{ id: '2', header: 'Вторая карточка', checked: false },
	{ id: '3', header: 'Третья карточка', checked: false },
	{ id: '4', header: 'Четвертая карточка', checked: false },
	{ id: '5', header: 'Пятая карточка', checked: false },
]

const Img = props => {
	const stl = props.checked ? {textDecoration: 'line-through'} : {}
	return (
		<li style={stl} onClick={() => props.mark(props.id)}>{props.header}</li>
	)
}

class List extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
		  arr
		};
		this.mark = this.mark.bind(this)
		this.del = this.del.bind(this)
	}
	mark(id) {
		const i = this.state.arr.findIndex(el => el.id ===id)
		this.setState(old => {
			old.arr[i].checked = !old.arr[i].checked
			return old
		})
	}
	del() {
		this.setState(old => {
			old.arr = old.arr.filter(el => !el.checked)
			return old
		})
	}
	render() {
		return (
			<div>
				<ul>
					{this.state.arr.map(el => {
						return <Img key={el.id} {...el} mark={this.mark} />
					})}
				</ul>
				<button onClick={this.del}>Удалить</button>
			</div>
		)
	}
}

ReactDOM.render(
	<List />,
	document.getElementById('root')
);

Последний раз редактировалось ksa, 13.08.2021 в 22:05.
Ответить с цитированием