0

У меня есть компонент на реакте, который описывает одно задание в Todo-приложении. Задание представляется элементом <li>, в котором есть текст и кнопка удаления в виде <span>. Если кликнуть по <li>, текст должен зачеркиваться. Если кликнуть по <span> с крестиком, запись удаляется.

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: true });
    }

    handleRemove()
    {
        alert("remove");
    }
};

export default TodoItem;

При вызове обработчика handleComplete() вываливается ошибка в окне браузера с указанием на строку, где обновляется состояние компонента. Из-за чего возникает эта ошибка?

Ошибка:

TypeError: this is undefined
handleComplete
src/TodoItem.js:24

Место, где используется компонент:

import React from "react";
import Todo from "./Todo";
import TodoItem from "./TodoItem";

const List = props => {
    return (
    <ul>
        {
            props.items.map((item, index) => <TodoItem item={item} />)
        }
    </ul>);
};

export default List;
4

1 ответ 1

2

handleComplete() теряет контекст. Нужно либо объявить метод как стрелочную функцию

handleComplete = () => {}

либо в конструкторе привязать контекст

this.handleComplete = this.handleComplete.bind(this)
2
  • Почему функция теряет свой контекст?
    – typemoon
    3 мая 2018 в 13:19
  • Простите, не теряет, она просто имеет другой контекст, в её "this" метод setState не объявлен. Нужно явно указать какой контекст использовать
    – abakan
    3 мая 2018 в 13:24

Ваш ответ

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

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