[英]can anyone tell me why i am unable to delete an item from the todo list?
Im having issues with react todo list. 我有反应todo列表的问题。
When submitted the list item appears fine. 提交时,列表项似乎没问题。
I should then be able to delete this be clicking on the item,however nothing happens. 然后我应该能够删除这个点击该项目,但没有任何反应。 As soon as i try to add another item the pages refreshes and all items are removed?
一旦我尝试添加另一个项目,页面刷新并删除所有项目?
console log just shows 控制台日志只显示
[object object]
[对象]
App 应用
import React, { Component } from 'react';
import './App.css';
import TodoItem from './TodoItem';
class App extends Component {
constructor(props) {
super(props);
this.state = {
items: []
};
this.addItems = this.addItems.bind(this);
this.deleteItem = this.deleteItem.bind(this);
}
addItems(e) {
if (this._inputElement !== '') {
let newItem = {
text: this._inputElement.value,
key: Date.now()
};
this.setState(prevState => {
return {
items: prevState.items.concat(newItem)
};
});
}
this._inputElement.value = '';
e.preventDefault();
}
deleteItem(key) {
console.log('key is' + key);
console.log('itesm as' + this.state.items);
var filteredItems = this.state.items.filter(function(item) {
return item.key !== key;
});
this.setState = {
items: filteredItems
};
}
render() {
return (
<div className="app">
<h2> things to do</h2>
<div className="form-inline">
<div className="header">
<form onSubmit={this.addItems}>
<input
ref={a => (this._inputElement = a)}
placeholder="enter task"
/>
<button type="submit">add</button>
</form>
</div>
</div>
<TodoItem entries={this.state.items} delete={this.deleteItem} />
</div>
);
}
}
export default App;
todoItem 的TodoItem
import React, { Component } from 'react';
//search bar
class TodoItem extends Component {
constructor(props) {
super(props);
this.createTasks = this.createTasks.bind(this);
}
createTasks(item) {
return (
<li onClick={() => this.delete(item.key)} key={item.key}>
{item.text}
</li>
);
}
delete(key) {
console.log('key is ' + key);
this.props.delete(key);
}
render() {
let todoEntries = this.props.entries;
let listItems = todoEntries.map(this.createTasks);
return <ul className="theList">{listItems}</ul>;
}
}
export default TodoItem;
You are assigning to setState
instead of using it as a method that it is 您正在分配给
setState
而不是将其用作方法
Change 更改
this.setState = {
items: filteredItems
};
to 至
this.setState({
items: filteredItems
});
And that is also the reason it will reload the app, as you have overwritten the setState
method you should be getting an error that setState
is not a function and it would crash the app. 这也是它重新加载应用程序的原因,因为你已经覆盖了
setState
方法,你应该得到一个错误,即setState
不是一个函数,它会使应用程序崩溃。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.