React удалить элемент li из списка ul

202

05 мая 2018, 16:28

У меня есть компонент для реакта, который описывает элемент <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;

Answer 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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Обмен данными между iframe js через postMessage + SAME ORIGIN POLICY

Как с помощю postMessage считать информацию с одного айфрейма(iframe) и записать в другой? Это был скороченый вариант вопросаПомогите дураку вопрос...

202

javascript