Прежде всего, я объявил бы класс как React Component, без этого вы не сможете иметь «состояние» и не сможете получить доступ к функции setState (которая является той, которая создает новое состояние). ).
Тогда я бы не связывал функции, просто в каждой из функций, которые вы хотели бы объявить внутри класса, я сделал бы это следующим образом, как я вам указал в коде:
nameOfFunction = () =>
С помощью этой формы ( функция стрелки ) вы получаете область и, следовательно, сможете использовать ее для доступа к состоянию.
Наконец, когда вы нажимаете, чтобы добавить новый элемент, это ЗАПРЕЩЕНО в React. Состояние является неизменным, и вы можете создать новое состояние только для внесения любых изменений, поэтому мы используем setState и помогаем себе ... this.state.todos ( оператор распространения ).
Это делается путем создания нового массива и добавления нужного вам объекта с идентификатором и текстом.
Я надеюсь, что помог вам.
Лучшее,
class TodoStore extends React.Component {
constructor(props) {
super(props);
this.state = {
todos: [
{
id: 113464613,
text: "Go Shopping",
},
{
id: 235684679,
text: "Pay Water Bill",
},
],
};
}
createTodo = text => {
const id = Date.now();
this.setState({
todos: [...this.state.todos, { id, text }],
});
this.emit("change");
};
deleteTodo = id => {
const todos = this.state.todos.filter(todo => id !== todo.id);
console.log(todos);
this.setState({
todos,
});
this.emit("change");
};
getAll = () => this.state.todos;
handleActions = action => {
switch (action.type) {
case "CREATE_TODO": {
this.createTodo(action.text);
break;
}
case "DELETE_TODO": {
this.deleteTodo(action.id);
break;
}
}
};
}