[英]Trying to get my delete button to work on a React Component
I'm working on my First project with React, I have an App and a ToDo. 我正在使用React开发我的第一个项目,我有一个App和一个ToDo。 I am defining a
deleteToDo
method and I want the method to call this.setState()
and pass it a new array that doesn't have the to-do item being deleted with the use of the .filter()
array method. 我正在定义一个
deleteToDo
方法,我希望该方法调用this.setState()
并传递一个新数组,该数组没有使用.filter()
数组方法删除待执行项。 I don't want to alter the code to much or introduce more complexity. 我不想更改代码或引入更多复杂性。 In essence I would like to keep it as straight forward as possible.
从本质上讲,我希望尽可能地保持直截了当。 I am still a beginner with React so this has been a big learning process.
我仍然是React的初学者,所以这是一个很大的学习过程。 I feel that I am close.
我觉得我很亲密。
This is the main app 这是主要的应用程序
import React, { Component } from 'react';
import './App.css';
import ToDo from './components/ToDo.js';
class App extends Component {
constructor(props) {
super(props);
this.state = {
todos: [
{ description: 'Walk the cat', isCompleted: true },
{ description: 'Throw the dishes away', isCompleted: false },
{ description: 'Buy new dishes', isCompleted: false }
],
newTodoDescription: ''
};
}
deleteToDo(index) {
const todos = this.state.todos.slice();
const todo = todos[index];
todo.deleteToDo = this.state.filter(index);
this.setState({ todos: todos });
}
handleChange(e) {
this.setState({ newTodoDescription: e.target.value })
}
handleSubmit(e) {
e.preventDefault();
if (!this.state.newTodoDescription) { return }
const newTodo = { description: this.state.newTodoDescription, isCompleted: false };
this.setState({ todos: [...this.state.todos, newTodo], newTodoDescription: '' });
}
toggleComplete(index) {
const todos = this.state.todos.slice();
const todo = todos[index];
todo.isCompleted = todo.isCompleted ? false : true;
this.setState({ todos: todos });
}
render() {
return (
<div className="App">
<ul>
{ this.state.todos.map( (todo, index) =>
<ToDo key={ index } description={ todo.description } isCompleted={ todo.isCompleted } toggleComplete={ this.toggleComplete } deleteToDo={ this.deleteToDo } />
)}
</ul>
<form onSubmit={ (e) => this.handleSubmit(e) }>
<input type="text" value={ this.state.newTodoDescription } onChange={ (e) => this.handleChange(e) } />
<input type="submit" />
</form>
</div>
);
}
}
export default App;
And this the ToDo aspect 这就是ToDo方面
import React, { Component } from 'react';
class ToDo extends Component {
render() {
return (
<li>
<button type="button" onClick={ this.props.deleteTodo} > delete </button>
<input type="checkbox" checked={ this.props.isCompleted } onChange={ this.props.toggleComplete } />
<span>{ this.props.description }</span>
</li>
);
}
}
export default ToDo;
You slice and array without the index, that's may be why your delete not work 你没有索引切片和数组,这可能是你删除不起作用的原因
deleteToDo(index) {
const todos = this.state.todos.slice(index, 1);
this.setState({ todos: todos });
}
1) You need to bind your deleteToDo
method in the constructor 1)您需要在构造函数中绑定
deleteToDo
方法
this.deleteToDo = this.deleteToDo.bind(this);
2) You need to set a new property on the component that is the same as its index. 2)您需要在组件上设置与其索引相同的新属性。
<ToDo
key={index}
id={index}
description={ todo.description }
// ...
/>
3) Then you can pass that index as the argument to deleteToDo
(making sure you spell the method name correctly). 3)然后你可以将该索引作为参数传递给
deleteToDo
(确保正确拼写方法名称)。
<button
type="button"
onClick={() => this.props.deleteToDo(this.props.index)}
>Delete
</button>
4) Finally, you can strip down your deleteToDo
method to the following: 4)最后,您可以将
deleteToDo
方法deleteToDo
到以下内容:
deleteToDo(index) {
// Return a new array that doesn't
// have a row with a matching index
const todos = this.state.todos.filter((el, i) => i !== index);
this.setState({ todos });
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.