如何在 React 中删除 ToDo 项 onClick? [英] How to delete a ToDo Item onClick in React?
问题描述
我正在用 React 做一个简单的待办事项应用程序，只是为了练习.单击列表项时如何删除它?
这是我的 todos.js
导出默认类 Todos extends Component {构造函数(道具){超级(道具)；this.state = { todos: [], text: '' };}addTodo(e) {e.preventDefault();this.setState({ todos: [ this.state.text, ...this.state.todos ] });this.setState({ 文本: ''});}更新值(e){this.setState({ 文本: [e.target.value]})}使成为() {返回(<div><form onSubmit = {(e) =>this.addTodo(e)}><输入占位符="添加待办事项"值={this.state.text}onChange={(e) =>{this.updateValue(e)}}/><button type="submit">添加待办事项</button></表单><TodoList todos={this.state.todos}/>);}}
这里是 TodoList.js，我试图从中删除列表项.
import React, { Component } from 'react';从'react-redux'导入{连接}；导出默认类 TodoList 扩展组件 {删除项目(e){//拼接 this.props.todos??}使成为() {返回(<ul>{ this.props.todos.map((todo) => {return { this.removeItem(e)}} key={todo}>{ todo } })});}}要删除待办事项，首先从父组件传递一个函数:
在constructor中绑定这个函数:
this.removeTodo = this.removeTodo.bind(this);在父组件中定义这个函数，它会从state变量中删除该项:
removeTodo(name){this.setState({todo: this.state.todo.filter(el => el !== name)})}然后子组件内部调用这个方法删除todo:
export default class TodoList extends Component {删除项目(e){this.props.removeTodo(item);}使成为() {返回(<ul>{ this.props.todos.map((todo) => {return { this.removeItem(todo)}} key={todo}>{ todo } })});}}建议:
不要在一个 function 内多次调用 setState 如果你想设置多个 state 值，那么写成这样:
this.setState({一:值1，b:值2，c: 值 3})工作示例:
class Todos extends React.Component {构造函数(道具){超级(道具)；this.state = { todos: [], text: '' };this.removeTodo = this.removeTodo.bind(this);}addTodo(e) {e.preventDefault();this.setState({todos: [ this.state.text, ...this.state.todos ],文本: ''});}removeTodo(name, i){让 todos = this.state.todos.slice();todos.splice(i, 1);this.setState({待办事项});}更新值(e){this.setState({ 文本: e.target.value})}使成为() {返回(<div><form onSubmit = {(e) =>this.addTodo(e)}><输入占位符="添加待办事项"值={this.state.text}onChange={(e) =>{this.updateValue(e)}}/><button type="submit">添加待办事项</button></表单><TodoList todos={this.state.todos} removeTodo={this.removeTodo}/>);}}class TodoList 扩展了 React.Component {删除项目(项目，我){this.props.removeTodo(item, i);}使成为() {返回(<ul>{ this.props.todos.map((todo,i) => {return
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><div id='app'/>更新:
这是针对@whs.bsmith 的疑问，我建议的代码在用户将在待办事项列表中添加唯一项目的情况下可以正常工作，如果他尝试添加相同的项目，它将不会反映在 ui 中因为 OP 使用待办事项名称作为键，并且键应该是唯一的.
要解决这个问题:
在工作片段中，我使用索引代替待办事项名称作为键，这将正常工作，并且允许用户多次添加相同的项目，并且在删除时，它只会删除该特定项目，而不是所有具有的项目同名，但使用索引作为键不是一个好主意.
I'm doing a simple todo app with React, just to practise. How can I delete a list item, when clicking on it?
Here is my todos.js
export default class Todos extends Component {
constructor(props) {
super(props);
this.state = { todos: [], text: '' };
}
addTodo(e) {
e.preventDefault();
this.setState({ todos: [ this.state.text, ...this.state.todos ] });
this.setState({ text: ''});
}
updateValue(e) {
this.setState({ text: [e.target.value]})
}
render() {
return(
<div>
<form onSubmit = {(e) => this.addTodo(e)}>
<input
placeholder="Add Todo"
value={this.state.text}
onChange={(e) => {this.updateValue(e)}}
/>
<button type="submit">Add Todo</button>
</form>
<TodoList todos={this.state.todos}/>
</div>
);
}
}
And here is the TodoList.js, where I'm trying to remove a list item from.
import React, { Component } from 'react';
import { connect } from 'react-redux';
export default class TodoList extends Component {
removeItem(e) {
// splice this.props.todos??
}
render() {
return(
<ul>
{ this.props.todos.map((todo) => {
return <li onClick={(e) => { this.removeItem(e)}} key={todo}>{ todo }</li>
})}
</ul>
);
}
}
To delete the todo items, first pass a function from parent component:
<TodoList todos={this.state.todos} removeTodo={this.removeTodo}/>
Bind this function in the constructor:
this.removeTodo = this.removeTodo.bind(this);
Define this function in parent component, it will delete that item from state variable:
removeTodo(name){
this.setState({
todo: this.state.todo.filter(el => el !== name)
})
}
Then inside child component call this method to delete todo:
export default class TodoList extends Component {
removeItem(e) {
this.props.removeTodo(item);
}
render() {
return(
<ul>
{ this.props.todos.map((todo) => {
return <li onClick={() => { this.removeItem(todo)}} key={todo}>{ todo }</li>
})}
</ul>
);
}
}
Suggestion:
Don't call setState multiple time within a function if you want to set multiple state values then write it like this:
this.setState({
a: value1,
b: value2,
c: value3
})
Working example:
class Todos extends React.Component {
constructor(props) {
super(props);
this.state = { todos: [], text: '' };
this.removeTodo = this.removeTodo.bind(this);
}
addTodo(e) {
e.preventDefault();
this.setState({
todos: [ this.state.text, ...this.state.todos ],
text: ''
});
}
removeTodo(name, i){
let todos = this.state.todos.slice();
todos.splice(i, 1);
this.setState({
todos
});
}
updateValue(e) {
this.setState({ text: e.target.value})
}
render() {
return(
<div>
<form onSubmit = {(e) => this.addTodo(e)}>
<input
placeholder="Add Todo"
value={this.state.text}
onChange={(e) => {this.updateValue(e)}}
/>
<button type="submit">Add Todo</button>
</form>
<TodoList todos={this.state.todos} removeTodo={this.removeTodo}/>
</div>
);
}
}
class TodoList extends React.Component {
removeItem(item, i) {
this.props.removeTodo(item, i);
}
render() {
return(
<ul>
{ this.props.todos.map((todo,i) => {
return <li onClick={() => { this.removeItem(todo, i)}} key={i}>{ todo }</li>
})}
</ul>
);
}
}
ReactDOM.render(<Todos/>, document.getElementById('app'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'/>
Update:
This is for @whs.bsmith doubt, the code that i suggested will work properly in the case where user will add the unique items in the todo list, if he will try to add the same item it will not reflect in ui because OP is using the todo items name as the key and key should be unique.
To solve that issue:
In working snippet i used indexes in place of todo items name for key, that will work properly and it will allow the user to add same item multiple times and on deletion, it will delete only that specific item not all the item having that same name, But it's not a good idea to use indexes as the key.
这篇关于如何在 React 中删除 ToDo 项 onClick?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
