reactjs – 如何删除React中的待办事项项？

<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项目名称为密钥,这将正常工作,它将允许用户多次添加相同的项目,并在删除时,它将只删除该特定项目而不是所有具有相同名称的项目,但使用索引作为关键并不是一个好主意.