我在React中有一个待办事项清单,可以删除待办事项,但是我想对已完成的待办事项应用删除线。之后,将它们列出为已完成会很好。这怎么可能?我应该更改我的代码吗?我试图在数组中使用对象,但这会导致差异,错误。
import React, { Component } from 'react';
class ToDoList extends Component {
constructor(props) {
super(props);
this.state = {
list: [],
items: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
this.handleRemove = this.handleRemove.bind(this);
}
handleChange(event) {
this.setState({items: event.target.value})
console.log(event.target.value);
}
handleSubmit(event) {
this.setState({
list: [...this.state.list, this.state.items],
items: ''
})
event.preventDefault();
}
handleRemove(index) {
const filteredArray = this.state.list.filter((_, i) => i !== index); // used underscore as a convention to address nothing is going there
this.setState({
list: filteredArray
});
}
render() {
return (
<div className='header main'>
<form onSubmit={this.handleSubmit} >
<label>
<input className='new-todo'
placeholder='What needs to be done?'
type="text"
value={this.state.items}
onChange={this.handleChange} />
</label>
</form>
<ul className='todo-list'>
{this.state.list.map((item, index) => (
<li className='list-view' key={index+1}>{item}<button className='list-view-button' onClick={this.handleRemove.bind(this, index) }>X</button></li>
))}
</ul>
<div className='footer'>
Remaining: {this.state.list.length}
</div>
</div>
);
}
}
export default ToDoList;
最佳答案
好吧,目前您只有一个代表待办事项的字符串数组。
我会针对您的物品状态执行此操作:items: [ { desc: "todo content", status: "new" }, { desc: "todo content", status: "completed" }, { desc: "todo content", status: "archived" }];
现在,当您循环浏览待办事项时,您可以检查不同设计显示的状态。
或者,您可以针对特定状态过滤待办事项,
即:this.state.items.filter(item => item.status==="new")
这只会给您“新”待办事项。
关于javascript - 列表项删除线 react ,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/43587889/