我正在用React做一个简单的todo应用程序,只是为了练习.点击它后如何删除列表项?
这是我的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> ); } }
这里是TodoList.js,我正在尝试从中删除列表项.
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> ); } }
要删除待办事项,首先从父组件传递一个函数:
<TodoList todos={this.state.todos} removeTodo={this.removeTodo}/>
在构造函数中绑定此函数:
this.removeTodo = this.removeTodo.bind(this);
在父组件中定义此函数,它将从状态变量中删除该项:
removeTodo(name){ this.setState({ todo: this.state.todo.filter(el => el !== name) }) }
然后在子组件内部调用此方法来删除待办事项:
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> ); } }
建议:
如果要设置多个状态值,请不要在函数内多次调用setState,然后像这样写:
this.setState({ a: value1,b: value2,c: value3 })
工作范例:
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'/>
更新:
这对于@ whs.bsmith有疑问,我建议的代码将在用户将在待办事项列表中添加唯一项目的情况下正常工作,如果他将尝试添加它将不会在ui中反映的相同项目,因为OP是使用todo项目名称作为密钥和密钥应该是唯一的.
要解决这个问题:
在工作片段中,我使用索引代替todo项目名称为密钥,这将正常工作,它将允许用户多次添加相同的项目,并在删除时,它将只删除该特定项目而不是所有具有相同名称的项目,但使用索引作为关键并不是一个好主意.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。