从 React js 中的列表中删除项目 [英] Remove items form the list in React js
本文介绍了从 React js 中的列表中删除项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在创建一个待办事项应用程序 &当我们单击它们时,我无法编写用于删除列表元素的代码.我希望在用户点击时删除特定项目
class Todo 扩展 React.Component {构造函数(道具){超级(道具);this.state={todos:[]};}保存() {var todos = [...this.state.todos];todos.push(this.newText.value);this.setState({todos});}去掉{}使成为(){返回(<div className="list"><h1>待办事项清单</h1><input type="text" ref={(ip) =>{this.newText = ip}}/><button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">保存按钮><ul>{this.state.todos.map(function(todo) {返回 {todo} })}
)}};
解决方案
您需要传递待办事项的索引,然后使用 javascript 中的 slice 函数将其删除,例如
remove(e, index){var todos = [...this.state.todos];todos.slice(index, 1);this.setState({todos})}
class Todo extends React.Component {构造函数(道具){超级(道具);this.state={todos:[]};}保存() {var todos = [...this.state.todos];todos.push(this.newText.value);this.setState({todos});}删除Todo(索引){控制台日志(索引)var todos = [...this.state.todos];todos.splice(索引,1)this.setState({todos})}使成为(){返回(<div className="list"><h1>待办事项清单</h1><input type="text" ref={(ip) =>{this.newText = ip}}/><button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">保存按钮><ul>{this.state.todos.map(function(todo, index) {return {todo} }.bind(this))}
)}};ReactDOM.render(
<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"></div>
I am creating a To-do app & I am not able to write the code for deleting the elements of the list when we click them. I want the specific item to delete when a user clicks on it
class Todo extends React.Component {
constructor(props) {
super(props);
this.state={todos:[]};
}
save() {
var todos = [...this.state.todos];
todos.push(this.newText.value);
this.setState({todos});
}
remove{
}
render(){
return(
<div className="list">
<h1> TO-DO List</h1>
<input type="text" ref={(ip) => {this.newText = ip}}/>
<button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save
</button>
<ul>
{this.state.todos.map(function(todo) {
return <li>{todo}</li>
})}
</ul>
</div>
)
}
};
解决方案
You need to pass on the index of the todo and then remove that using the slice function in javascript like
remove(e, index){
var todos = [...this.state.todos];
todos.slice(index, 1);
this.setState({todos})
}
class Todo extends React.Component {
constructor(props) {
super(props);
this.state={todos:[]};
}
save() {
var todos = [...this.state.todos];
todos.push(this.newText.value);
this.setState({todos});
}
deleteTodo(index){
console.log(index)
var todos = [...this.state.todos];
todos.splice(index, 1)
this.setState({todos})
}
render(){
return(
<div className="list">
<h1> TO-DO List</h1>
<input type="text" ref={(ip) => {this.newText = ip}}/>
<button onClick={this.save.bind(this)} className="btn btn-primary glyphicon glyphicon-floppy-saved">Save
</button>
<ul>
{this.state.todos.map(function(todo, index) {
return <li key={index} onClick={this.deleteTodo.bind(this, index)}>{todo}</li>
}.bind(this))}
</ul>
</div>
)
}
};
ReactDOM.render(<Todo/>, 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"></div>
这篇关于从 React js 中的列表中删除项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文