У меня есть компонент для реакта, который описывает элемент <li>
списка. Логика работы компонента такая: он рендерит текст и <span>
с крестиком внутри. На <li>
и <span>
вешаются обработчики кликов. При клике по li текст зачеркивается. При клике по span нужно удалить li из списка ul.
Я реализовал зачеркивание текста по клику. Как реализовать удаление li из ul? Как я понимаю, за удаление должен отвечать сам список, а не элемент li. В таком случае, как это сделать?
Почему нельзя инкапсулировать всю логику внутри li?
import React from "react";
class TodoItem extends React.Component
{
constructor(props) {
super(props);
this.state = { text: props.item, done: false };
}
render() {
let style = this.state.done ? "done" : "";
return (
<li onClick={this.handleComplete} className={style}>
{this.state.text}
<span className="close" onClick={this.handleRemove}>{"\u00D7"}</span>
</li>
);
}
handleComplete = () => {
this.setState({ done: !this.state.done });
}
handleRemove = () => {
alert("remove");
}
};
export default TodoItem;
props
), а дочерний компонент должен их "дергать" передавая лишь нужные индексы. Это должен быть стейтлесс компонент.TodoList
в своемstate
хранит массив объектовstate = { items: [ { text: 'Текст', done: false }, ... ] }
эти объекты и передаются вTodoItem
вместе с методом который будет изменятьstate
, при клике на что-то вызывается этот метод, меняетstate
, весь список перерисовывается в соответствии с новыми вводными.