0

У меня есть компонент для реакта, который описывает элемент <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;
5
  • Зачеркивание у вас тоже неверно реализовано. В теории у родителя должны быть методы которые будут заниматься удалением и изменением массива (только их и нужно передавать в props), а дочерний компонент должен их "дергать" передавая лишь нужные индексы. Это должен быть стейтлесс компонент. 3 мая 2018 в 17:37
  • То есть, если у меня есть компонент List, который генерит набор TodoItem, то именно List должен зачеркивать и удалять элементы?
    – typemoon
    3 мая 2018 в 17:49
  • const List = props => { return ( <ul> { props.items.map((item, index) => <TodoItem item={item} />) } </ul>); };
    – typemoon
    3 мая 2018 в 17:49
  • @MedvedevDev, компонент TodoList стейтфул, а TodoItem - стейтлесс, и TodoList в своем состоянии хранит массив заданий?
    – typemoon
    3 мая 2018 в 18:00
  • все верно, TodoList в своем state хранит массив объектов state = { items: [ { text: 'Текст', done: false }, ... ] } эти объекты и передаются в TodoItem вместе с методом который будет изменять state, при клике на что-то вызывается этот метод, меняет state, весь список перерисовывается в соответствии с новыми вводными. 3 мая 2018 в 18:12

1 ответ 1

1

Как-то так:

const TodoItem = ({ text, done, handleComplete, handleRemove }) => (
  <li className={ done ? 'done' : '' }>
    <span onClick={ handleComplete }>{ text }</span>
    <span className="close" onClick={ handleRemove }>{"\u00D7"}</span>
  </li>
);

class TodoList extends React.Component {
  state = {
    items: [
      { text: 'ListItem-1', done: false },
      { text: 'ListItem-2', done: false },
      { text: 'ListItem-3', done: false },
      { text: 'ListItem-4', done: false }
    ]
  };
  
  handleComplete = index => this.setState({
    items: this.state.items.map(( item, i ) => (
      i === index
        ? { ...item, done: true }
        : item)
    )
  });

  handleRemove = index => this.setState({
    items: this.state.items.filter(( item, i ) => i !== index)
  });

  render() {
    return this.state.items.map(( item, i ) => (
      <TodoItem
        key={ i }
        { ...item }
        handleComplete={ () => this.handleComplete(i) }
        handleRemove={ () => this.handleRemove(i) }
      />
    ));
  }
}

ReactDOM.render(<TodoList/>, document.getElementById('todo'));
li.done { text-decoration: line-through; }
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="todo"></div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.