Reactjs 如何删除待办事项列表中的所有选定任务
我是reactjs新手，我正在尝试创建一个todolist，在其中我可以一次删除所有选定的任务。虽然我可以一个接一个地删除每个任务，但我不知道如何在delete方法中传递所选任务的索引或id。我在代码末尾添加了这个按钮。那个么，有谁能帮我找出我该如何将所选任务的索引或id传递给button的deleted方法呢？是否有可能仅在选择任何任务时才显示“删除”Reactjs 如何删除待办事项列表中的所有选定任务,reactjs,Reactjs,我是reactjs新手，我正在尝试创建一个todolist，在其中我可以一次删除所有选定的任务。虽然我可以一个接一个地删除每个任务，但我不知道如何在delete方法中传递所选任务的索引或id。我在代码末尾添加了这个按钮。那个么，有谁能帮我找出我该如何将所选任务的索引或id传递给button的deleted方法呢？是否有可能仅在选择任何任务时才显示“删除” import {Jumbotron, Input, Label, Button, Row, Col, Navbar, NavbarBrand}
import {Jumbotron, Input, Label, Button, Row, Col, Navbar, NavbarBrand} from 'reactstrap';
import { Control, LocalForm, Errors } from 'react-redux-form';
//for validations
const required = (val) => val && val.length;
const minLength = (len) => (val) => val && (val.length >= len);
class Task extends Component {
constructor(props) {
super(props);
let email = localStorage.getItem("email")
if (!email) {
this.props.history.push("/login")
}
this.state = {
email: email,
tasks: [],
todoText: "",
done: false
};
};
// For todoText (textbox entry)
onChangeInput = e => {
this.setState({ todoText: e.target.value });
}
//for Adding the task
onSubmitTodo = (values) => {
const payload = {
email: this.state.email
}
const todoText = this.state.todoText
fetch('http://localhost:3000/tasks', {
method: 'POST',
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
email: payload.email,
tasks: todoText,
})
})
.then((response) => {
if (response.ok) {
return this.setState(({ tasks }) => ({
tasks: [...tasks, { id: tasks.length, name: values.todoText, done: false }],
todoText: ""
}));
}
return Promise.reject(response);
})
.catch(function (error) {
console.warn('Something went wrong', error)
})
};
//for using tasks as done or not done
onChangeBox = item => {
this.setState(({ tasks }) => ({
tasks: tasks.map(el =>
el.id === item.id ? { ...el, done: !el.done } : el)
}));
};
//for deleting selected tasks
handleDel = item => {
const payload = {
email: this.state.email
}
fetch('http://localhost:3000/tasks', {
method: 'DELETE',
headers: {
'Content-type': 'application/json',
'Accept': 'application/json'
},
body: JSON.stringify({
email: payload.email,
tasks: [item.id]
})
})
.then((response) => {
if (response.ok) {
return this.setState(({ tasks }) => ({
tasks: tasks.filter(el => el.id !== item.id)
})),
this.componentDidMount();
}
})
};
componentDidMount() {
const payload = {
email: this.state.email
}
fetch('http://localhost:3000/', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-type': 'application/json'
},
body: JSON.stringify(payload)
})
.then(res => res.json())
.then((data) => {
let tasks = []
data.tasks.map((item, index) => {
tasks.push({ id: index, name: item, done: false })
})
this.setState({ tasks: tasks })
})
}
render() {
const List = ({ list, onChangeBox, handleDel }) => (
<ul className='ul'>
{
list.map((item) => ( //list view for todo list
< li key={item.id} className="list" style={{ textDecoration: item.done ? "line-through" : "" }}>
<Input type="checkbox" onClick={() => onChangeBox(item)} defaultChecked={item.done} style={{ marginRight: 20 }} />
{item.name}
<span type="button" onClick={() => handleDel(item)} style={{ marginLeft: 50 }} className="fa fa-trash-o fa-lg "></span>
</li>
))
}
</ul>
);
const { tasks, todoText } = this.state;
return (
<>
<Navbar dark color='dark'>
<div className="container">
<span className="fa fa-tasks fa-lg"></span>
<NavbarBrand href="/" > To Do
<br /> keep your tasks in check </NavbarBrand>
</div>
</Navbar>
<Jumbotron>
<div className="container">
<LocalForm onSubmit={(values) => this.onSubmitTodo(values)}>
<Row className="form-group">
<Label htmlFor="todoText" md={1}><h4>Task</h4></Label>
<Col md={3}>
<Control.text model=".todoText" autoComplete="off" value={todoText}
onChange={this.onChangeInput}
validators={{
required, minLength: minLength(1)
}}
className="form-control col-md-3" />
<Errors className="text-danger"
model=".todoText"
show="touched"
messages={{
required: 'required',
minLength: 'Must be Greater than or equal to 1 characters'
}}
/>
</Col>
<Col md={2}>
<Button type="submit" color="success" >
ADD TASK
</Button>
</Col>
</Row>
</LocalForm> <br />
{tasks.length ? <List list={tasks} onChangeBox={this.onChangeBox} handleDel={this.handleDel} /> : <div className="notask">You don't have any pending tasks...Yay!!!</div>}
<Button className="button" >Delete</Button>
</div>
</Jumbotron>
</>
);
}
}
export default Task;
import{Jumbotron，Input，Label，Button，Row，Col，Navbar，navbarrand}来自'reactstrap'；
从“react redux form”导入{Control，LocalForm，Errors}；
//用于验证
所需常量=（val）=>val&&val.length；
常量minLength=（len）=>（val）=>val&&（val.length>=len）；
类任务扩展组件{
建造师（道具）{
超级（道具）；
让email=localStorage.getItem（“电子邮件”）
如果（！电子邮件）{
this.props.history.push（“/login”）
}
此.state={
电邮:电邮,，
任务：[]，
todoText:“，
完成：错误
};
};
//用于todoText（文本框条目）
onChangeInput=e=>{
this.setState（{todoText:e.target.value}）；
}
//用于添加任务
onSubmitTodo=（值）=>{
常数有效载荷={
电子邮件：this.state.email
}
const todoText=this.state.todoText
取（'http://localhost:3000/tasks', {
方法：“POST”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
},
正文：JSON.stringify({
电子邮件：payload.email，
任务：todoText，
})
})
。然后（（响应）=>{
if（response.ok）{
返回此.setState（（{tasks}）=>({
tasks:[…tasks，{id:tasks.length，name:values.todoText，done:false}]，
todoText:“
}));
}
退货承诺。拒绝（回复）；
})
.catch（函数（错误）{
console.warn（'出错'，错误）
})
};
//用于使用已完成或未完成的任务
onChangeBox=项目=>{
this.setState（（{tasks}）=>({
tasks:tasks.map（el=>
el.id==item.id？{…el，完成：！el.done}:el）
}));
};
//用于删除选定任务
handleDel=项目=>{
常数有效载荷={
电子邮件：this.state.email
}
取（'http://localhost:3000/tasks', {
方法：“删除”，
标题：{
“内容类型”：“应用程序/json”，
“接受”：“应用程序/json”
},
正文：JSON.stringify({
电子邮件：payload.email，
任务：[item.id]
})
})
。然后（（响应）=>{
if（response.ok）{
返回此.setState（（{tasks}）=>({
tasks:tasks.filter（el=>el.id！==item.id）
})),
this.componentDidMount（）；
}
})
};
componentDidMount（）{
常数有效载荷={
电子邮件：this.state.email
}
取（'http://localhost:3000/', {
方法：“POST”，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（有效负载）
})
.then（res=>res.json（））
。然后（（数据）=>{
让任务=[]
data.tasks.map（（项目，索引）=>{
push（{id:index，name:item，done:false}）
})
this.setState（{tasks:tasks}）
})
}
render（）{
常量列表=（{List，onChangeBox，handleDel}）=>(
{
list.map（（项）=>（//待办事项列表的列表视图
-
onChangeBox（item）}defaultChecked={item.done}style={{{{marginRight:20}}/>
{item.name}
handleDel（项目）}style={{{marginLeft:50}}className=“fa-trash-o fa lg”>
))
}
);
const{tasks，todoText}=this.state；
返回(
做
检查您的任务
this.onSubmitTodo（值）}>
任务
添加任务
{tasks.length？：您没有任何挂起的任务…耶！！！}
删除
);
}
}
导出默认任务；